数据表反转操作中的全选复选框答案

【问题标题】：Select All checkbox in Datatables inverted operation数据表反转操作中的全选复选框
【发布时间】：2018-03-16 00:31:35
【问题描述】：

这是我为 K12 学校创建的一个开源项目。请参阅以下内容：

http://users.sch.gr/chertour/projectsms/sms_list_ajax_demo.html

你会发现：

获取服务器端数据并嵌入到数据表中
jQuery DataTables Checkboxes 用于在 jQuery DataTables 中使用复选框的插件。

JS代码：

$(document).ready(function() {
    var table = $('#students').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": 'students_list_db_sms_send.php',

        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        'columnDefs': [{
            targets: 0,
            "checkboxes": {
                "selectRow": true
            }
        },
            {
                targets: 1,
                className: 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            }
        ],
        'select': {
            'style': 'multi'
        },
        'order': [
            [2, 'asc']
        ]
    });

    $('#students tbody').on('click', 'input[type="checkbox"]', function() {
        var tr            = $(this).closest('tr');
        var rowData       = table.row(tr).data();
        var rows_selected = table.column(0).checkboxes.selected();

        $('#sms_names').text('');

        $.each(rows_selected, function(index, rowId) {
            $('#sms_names').append(' ' + rowId);
        });

    });

    /************************************THIS IS FROM THE FOLLOWING FIDDLE*****************************************/
    /* https://jsfiddle.net/snqw56dw/466/  */

    $('#students').on('init.dt', function() {
        $('#students thead th input[type="checkbox"]').on('click', function(e) {
            var rows_selected = table.column(0).checkboxes.selected();

            $('#sms_names').text('');
            $.each(rows_selected, function(index, rowId) {
                $('#sms_names').append(' ' + rowId);
            });
        });
    });
});

对应的HTML是：

<body>

<hr>
<table id='students' class='display' width='100%' cellspacing='0'>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>name</th>
            <th>surname</th>
            <th>fathers name</th>
            <th>date</th>
            <th>tel</th>
            <th>class</th>
        </tr>
    </thead>
</table>

<span id="sms_names"></span>

</body>

我已启用第一行作为复选框行。

当我单击复选框时，rowID 会打印在 <span> 元素中。多个复选框按预期打印。
当我按下“全选”复选框时，所有复选框都被选中，但没有打印任何内容。
当我切换（“全选”复选框未选择）时，会打印每个值。

应该是相反的。我尝试了许多变化，但无济于事。有什么我错过的吗？非常感谢任何想法或建议。

【问题讨论】：

标签： jquery checkbox datatables

【解决方案1】：

问题出在您的点击事件处理程序中，它在 Checkbox 插件有机会更新选定复选框列表之前触发。

使用columns.checkboxes.selectCallback 处理复选框的选择/取消选择事件。

例如：

$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/1us28',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true,
               'selectCallback': function(){
                  printSelectedRows();
               }
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
   });   
});

// Print selected rows
function printSelectedRows(){
   var rows_selected = $('#example').DataTable().column(0).checkboxes.selected();

   // Output form data to a console     
   $('#example-console-rows').text(rows_selected.join(","));
};

有关代码和演示，请参阅this example。

【讨论】：

非常感谢您的回复和帖子编辑。非常感谢。
@KonstantinosChertouras，很高兴 Checkbox 插件对您有用。您提出了一个很好的观点，我会将这个用例添加到文档中。
@Gyrocode.com 如果我想使用 jquery 取消全选怎么办？那不调用 selectCallback 并且列表不更新。
@Gyrocode.com 简而言之。 $('input[type="checkbox"]', table.cells().nodes()).prop('checked',false); 不会影响 selectCallback 。