使用分頁器DataTable復選框“全部選中/取消選中”

Question

我有一個動態表，顯示mysql的寄存器（ id, product, quantity, price ），每個寄存器都有一個checkbox ，另一個checkbox “ check / uncheck all”使列表中的產品總和顯示在input:text稱為total 。

動態表有一個分頁器，因為它上載了很多數據庫寄存器， checkbox可以完美地工作，並且求和，但是它只是在頁面1上執行，當我切換到頁面2時，這沒有標記，並且我必須單擊“全部選中/取消選中”才能標記第2頁上的表格的所有復選框，並將實際頁的總和與最后一頁的總和相加，依此類推。

我想，以紀念checkbox的“選中/取消所有”，這可能會選擇所有checkbox動態表的所有頁面的列表;

對不起，我的英語不好，謝謝。

我正在同時處理它的呼叫器DataTables ，這是我正在使用的代碼：

 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

我的解決方案跟蹤與數據表關聯的數據對象中的檢查內容和未檢查內容。

它使用drawCallback選項使顯示的頁面與數據對象保持同步。

我在數據表中添加了sum函數，用於對選中行的salary列求和。

它運行在http://jsbin.com/joxiri/edit?html,js，輸出

    $(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

使用復選框插件，我不再需要跟蹤復選框。 因為他的插件在選中時會將行標記為選中行，所以我也不必將數據標記為已選中。

sum函數simple獲取選定的行並將它們總計。 我將總數放在薪水列的底部。

該代碼可在我自己的環境中工作，但由於我使用ajax從盒子上的Web服務獲取數據，因此無法將其放入jsbin中。

我還使用了另一個名為autoNumeric的插件來格式化總數。

    <!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>