使用分页器DataTable复选框“全部选中/取消选中”

Question

I've a dynamic table showing registers of mysql ( id, product, quantity, price ), each register has a checkbox , and the other checkbox “check/uncheck all” which make a sum of products on the lists and show on a input:text called total .

The dynamic table has a pager, because it uploads a lot of register of the data base, the checkbox work perfectly, and make the sum, but it just do it on the page 1, when I change to the page 2, this are unmark, and I have to click in “check/uncheck all” to be able to mark all the checkbox of the table on page 2, and sum the total of the actual page with the last page, and so on.

I'd like to mark the checkbox of “check/uncheck all” and this could select all the checkbox list of all pages of the dynamic table;

Sorry for my bad english and thanks.

The pager that I'm concurrently working on its call DataTables , and this is the code that I'm using:

 let buys = document.getElementById('tbl-buys'); let cboxAll = buys.querySelector('thead input[type="checkbox"]'); let cboxes = buys.querySelectorAll('tbody input[type="checkbox"]'); let totalOutput = document.getElementById('total'); let total = 0; [].forEach.call(cboxes, function (cbox) { cbox.addEventListener('change', handleRowSelect); }); cboxAll.addEventListener('change', function () { [].forEach.call(cboxes, function (cbox) { //cbox.checked = cboxAll.checked; cbox.click(); }); }); function handleRowSelect (e) { let row = e.target.parentNode.parentNode; let qty = row.querySelector('td:nth-child(3)').textContent; let price = row.querySelector('td:nth-child(4)').textContent; let cost = Number(qty) * Number(price); if (e.target.checked) { total += cost; } else { total -= cost; } total = Number(total.toFixed(2)); totalOutput.value = total; } $(document).ready(function(){ $('#tbl-buys').DataTable({ "columnDefs": [ { orderable: false, targets: [0] }], }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> <table class="table table-striped table-bordered" data-page-length='2' id="tbl-buys"> <thead> <tr> <th> <input type="checkbox"/> </th> <th>Producto</th> <th>Cantidad</th> <th>Precio</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"/> </td> <td>Laptop Dell XPS 15</td> <td>1</td> <td>782.49</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Mouse bluetooth solar</td> <td>1</td> <td>19.90</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Sony Headphones 1000px</td> <td>1</td> <td>29.90</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Intel x99</td> <td>1</td> <td>200.00</td> </tr> </tbody> </table> <label>Total</label> <input type="text" id="total" class="form-control" readonly value="0.0" /> 

Answer 1

My solution keeps track of the what is checked and what is not in the data object associated with the datatable.

It uses the drawCallback option to keep the displayed page in sync with the data object.

I added a sum function to the datatable for summing the salary column for checked rows.

its running at http://jsbin.com/joxiri/edit?html,js,output

    $(document).ready(function () {

        // Add function for summing salaries for rows that are checked
        $.fn.dataTable.Api.register('sum()', function () {
            var dtData = this;
            var total = 0;
            $.each(dtData, function (i, it) {
                if (it.isChecked) {
                    var a = parseFloat(it.salary.replace("$", "").replace(",", ""));
                    total += a;
                }
            });
            $("#total").val(total);
        });

        // Takes the dataset below and adds a value to track the isChecked status for the row.
        $.each(dataSet, function (i, it) { it.isChecked = false; });

        // Table definition
        var dtapi = $('#example').DataTable({
            data: dataSet,
            pageLength: 3,

            // We have the option of invalidating and redrawing the table on each checkox change or
            // as I did, use the drawCallback to set the checkbox to match the row data 
            "drawCallback": function (settings) {
                // not important on first draw so not worried about dtapi being defined on table initialization
                if (dtapi) {
                    var visibleRows = $("td.cbcell").closest("tr");
                    visibleRows.each(function (i, item) {
                        $("td.cbcell input", item).prop("checked", dtapi.rows(item).data()[0].isChecked);
                    })
                }
            },
            // this is the default but note that the drawCallback will not be called on each page change if set to true.
            "deferRender": false,
            "columnDefs": [],
            "order": [1],
            "columns": [
                {
                    "data": "isChecked",
                    // adding the class name just to make finding the checkbox cells eaiser
                    "class": "cbcell",
                    "orderable": false,
                    // Put the checkbox in the title bar
                    "title": "<input type='checkbox' />",
                    // puts the checkbox in each row
                    "render": function (dataItem) {
                        if (dataItem)
                            return "<input checked type='checkbox'/>";
                        else
                            return "<input type='checkbox'/>";
                    }
                },
                // rest of the columns
                { data: "first_name", title: "First Name" },
                { data: "last_name", title: "Last Name" },
                { data: "position", title: "Position" },
                { data: "office", title: "Office" },
                { data: "start_date", title: "Start date" },
                { data: "salary", title: "Salary" }
            ]
        });

        // This is the event handler for the check all checkbox
        $("th input[type=checkbox]").on("click", function () {
            var isChecked = this.checked
            var ld = $('#example').DataTable().rows().data();
            $.each(ld, function (i, item) {
                item.isChecked = isChecked;
            });
            $(".cbcell input").prop("checked", isChecked);
            dtapi.data().sum();
        })

        // event handler for individual rows
        $("#example").on("click", "td input[type=checkbox]", function () {
            var isChecked = this.checked;

            // set the data item associated with the row to match the checkbox
            var dtRow = dtapi.rows($(this).closest("tr"));
            dtRow.data()[0].isChecked = isChecked;

            // determine if the over all checkbox should be checked or unchecked
            if (!isChecked) {
                // if one is unchecked, then checkall cannot be checked
                $("th input[type=checkbox]").prop("checked", false);
            }
            else {
                $("th input[type=checkbox]").prop("checked", true);
                $.each(dtapi.data(), function (i, item) {
                    if (!item.isChecked) {
                        $("th input[type=checkbox]").prop("checked", false);
                        return false;
                    }
                });
            }

            dtapi.data().sum();
        });


    });

    // DataTable data set used
    var dataSet = [
    {
        "first_name": "Airi",
        "last_name": "Satou",
        "position": "Accountant",
        "office": "Tokyo",
        "start_date": "28th Nov 08",
        "salary": "$162,700"
    },
    {
        "first_name": "Angelica",
        "last_name": "Ramos",
        "position": "Chief Executive Officer (CEO)",
        "office": "London",
        "start_date": "9th Oct 09",
        "salary": "$1,200,000"
    },
    {
        "first_name": "Ashton",
        "last_name": "Cox",
        "position": "Junior Technical Author",
        "office": "San Francisco",
        "start_date": "12th Jan 09",
        "salary": "$86,000"
    },
    {
        "first_name": "Bradley",
        "last_name": "Greer",
        "position": "Software Engineer",
        "office": "London",
        "start_date": "13th Oct 12",
        "salary": "$132,000"
    },
    {
        "first_name": "Brenden",
        "last_name": "Wagner",
        "position": "Software Engineer",
        "office": "San Francisco",
        "start_date": "7th Jun 11",
        "salary": "$206,850"
    },
    {
        "first_name": "Brielle",
        "last_name": "Williamson",
        "position": "Integration Specialist",
        "office": "New York",
        "start_date": "2nd Dec 12",
        "salary": "$372,000"
    },
    {
        "first_name": "Bruno",
        "last_name": "Nash",
        "position": "Software Engineer",
        "office": "London",
        "start_date": "3rd May 11",
        "salary": "$163,500"
    },
    {
        "first_name": "Caesar",
        "last_name": "Vance",
        "position": "Pre-Sales Support",
        "office": "New York",
        "start_date": "12th Dec 11",
        "salary": "$106,450"
    },
    {
        "first_name": "Cara",
        "last_name": "Stevens",
        "position": "Sales Assistant",
        "office": "New York",
        "start_date": "6th Dec 11",
        "salary": "$145,600"
    },
    {
        "first_name": "Cedric",
        "last_name": "Kelly",
        "position": "Senior Javascript Developer",
        "office": "Edinburgh",
        "start_date": "29th Mar 12",
        "salary": "$433,060"
    }
    ]

Answer 2

Using the checkbox plugin, I do not need to keep track of the checkboxes anymore. Because his plugin marks a row as selected when checked, I don't have to mark the data as being checked anymore either.

the sum function simple gets the selected rows and totals them. I put the total at the bottom of the salary column.

This code works in my own environment but could not put it in jsbin since I am using ajax to get the data from a web service on my box.

I also used a different plugin, called autoNumeric to format the total.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/css/dataTables.checkboxes.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/js/dataTables.checkboxes.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {

                // the checkbox plugin selects the row when 
                // clicked so all this function has to do it get the selected rows.
                $.fn.dataTable.Api.register('sum()', function () {
                    var r = this.rows(".selected").data();
                    var total = 0;
                    $.each(r, function (i, it) {
                        total += it.salary;
                    });

                    // I put the number in the footer of the salary column
                    // using the autoNumeric plugin to format the amount.
                    $("#total").autoNumeric("set",total);
                });


                var table = $('#example').DataTable({
                    'processing': false,
                    // Again, this code will not work if serverSide is set to true.
                    'serverSide': false,
                    'ajax': {
                        // I used an asmx page in my own development environment to get the data.
                        url: 'wsService.asmx/GetDTDataSerializedList',
                        type: "post",
                        data: function(dtparms){
                            return JSON.stringify({ parameters: JSON.stringify(dtparms) });
                        },
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (dtData) {
                            var p = JSON.parse(dtData);
                            var d = JSON.parse(p.d);
                            return JSON.stringify({ data: d });
                        },
                    },
                    'columnDefs': [
                       {
                           'targets': 0,
                           'checkboxes': {
                           'selectRow': true
                           }
                       }

                    ],
                    'select': {
                        'style': 'multi'
                    },
                    'columns': [
                        { data: null },
                        { data: "name" },
                        { data: "position" },
                        { data: "office" },
                        { data: "extn" },
                        { data: "start_date" },
                        { data:"salary", className:".salary"}
                    ],
                    'order': [[1, 'asc']],
                    initComplete: function () {
                          $("#total").autoNumeric("init", { "currencySymbol": "$" });
                        $("#total").autoNumeric("set", 0);
                    }
                });


                // event handler for individual rows
                $("tbody" ).on("click","input[type=checkbox]", function () {
                    table.data().sum();
                });
                $("thead").on("click", "th input[type=checkbox]", function () {
                    table.data().sum();
                });

            });
        </script>
    </head>
    <body>
        <form>
            <div>
                <table class="display" id="example" cellspacing="0">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th id="total"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </form>
    </body>
    </html>