jquery - 数据表反转操作中的全选复选框-6ren

jquery - 数据表反转操作中的全选复选框

转载作者：行者123 更新时间：2023-12-03 23:04:17

这是我为 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> 中元素。按预期打印多个复选框。
当我按下“全选”复选框时，复选框全部被选中，但没有打印任何内容。
当我切换(“全选”复选框未选择)时，每个值都会被打印。

应该是相反的情况。我尝试了很多变体但没有成功。有什么我错过的吗？任何想法或建议都将不胜感激。

最佳答案

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

使用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(","));
};