Question

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

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

你会发现：

获取并嵌入到Datatable中的服务器端数据
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>元素中。按预期打印多个复选框。
当我按下＆＃34;全选＆＃34;复选框，复选框全部被选中但没有打印任何内容。
当我切换（＆＃34;全选＆＃34;复选框UNSELECTED）时，将打印每个值。

它应该是另一种方式。我尝试了很多变化但无济于事。我错过了什么吗？任何想法或建议都非常感谢。

Answer 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以获取代码和演示。

在数据表反转操作中选择全部复选框

1 个答案: