选择所有复选框数据表触发器答案

【问题标题】：select all checkbox datatable trigger选择所有复选框数据表触发器
【发布时间】：2017-07-27 02:40:16
【问题描述】：

我这几天一直在努力解决这个问题。问题是如何在数据表前面的全选复选框上进行“单击”以触发某些事情（在这种情况下，我的按钮的“禁用”类）？

当用户一个接一个地“单击”复选框时，我已经使触发器工作，但是当用户单击全选复选框时，我无法使其工作。请帮助我，提前谢谢你。

这是我的数据表脚本：

$(document).ready(function () {
            table = $('#em').DataTable({
                "scrollY": "45vh",
                "scrollX": true,
                "scrollCollapse": true,
                "paging": false,

                "responsive": true,

                "aaSorting": [1, 'desc'],
                "iDisplayLength": 5,
                "ajax": {
                    "url": "/Eromo_Web/inv?act=getAll",
                    "type": "POST",
                    "dataSrc": ""
                },
                "columnDefs": [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        }
                    }
                ],
                "columns": [
                    {"data": null},
                    {"data": "CODE"},
                    {"data": "TYPE"},
                    {"data": "NAME"},
                    {"data": "KIND"},
                    {"data": "MERK"},
                    {"data": "MODEL_TYPE"},
                    {"data": "LOC"},
                    {"data": "BUY_DATE"},
                    {"data": "USERNAME"},
                    {"data": "DESCR"},
                    {"data": "RFRGRNT"},
                    {"data": "MANF"},
                    {"data": "COUNTRY"}
                ]
            });

我当前的点击触发器：

//getting ID on checkbox click
            $('#em').on('change', null, function () {
                if (table.column(0).checkboxes.selected().length > 0) {
                    $('#generateqrcode').attr('disabled', false);
                } else {
                    $('#generateqrcode').attr('disabled', true);
                }
                if (table.column(0).checkboxes.selected().length === 1) {
                    ID = "";
                    $.each(table.column(0).checkboxes.selected(), function (key, value) {
                        ID = value["CODE"];
                    });
                    $('#update').attr('disabled', false);
                    $('#delete').attr('disabled', false);
                } else {
                    $('#update').attr('disabled', true);
                    $('#delete').attr('disabled', true);
                }
            });

【问题讨论】：

标签： jquery checkbox datatables

【解决方案1】：

试试下面的代码：

$('#em').on('init.dt', function(){
    $('#em thead th input[type="checkbox"]').on('click', function(e) {   
        alert('Clicked on "Select all"');   
    });
});

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

但是，如果您使用行选择，我建议您处理 select 和 deselect 事件。

$('#example').on('select.dt', function(){
   alert('Row selected');
});

$('#example').on('deselect.dt', function(){
   alert('Row deselected');
});

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

在jQuery DataTables Checkboxes 插件的未来版本中，我们将添加用于选择所有复选框的事件生成。

【讨论】：

感谢您的帮助。

【解决方案2】：

谢谢你的回答。抱歉回复晚了，我发现了我的问题，因为我使用了属性"scrollY": "45vh",和"scrollX": true。如果我禁用它，“selectAll”复选框可以很容易地触发。我不知道为什么。

这是我的最终代码：

table = $('#em').DataTable({
                "ajax": {
                    "url": "/Eromo_Web/inv?act=getAll",
                    "type": "POST",
                    "dataSrc": ""
                },
                "columnDefs": [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': false
                        }
                    }
                ],
                "columns": [
                    {"data": null},
                    {"data": "CODE"},
                    {"data": "TYPE"},
                    {"data": "NAME"},
                    {"data": "KIND"},
                    {"data": "MERK"},
                    {"data": "MODEL_TYPE"},
                    {"data": "LOC"},
                    {"data": "BUY_DATE"},
                    {"data": "USERNAME"},
                    {"data": "DESCR"},
                    {"data": "RFRGRNT"},
                    {"data": "MANF"},
                    {"data": "COUNTRY"}
                ],
                "paging": false,
                "responsive": true,
                "aaSorting": [1, 'desc'],
                "iDisplayLength": 5
            });

还有这个：

//                getting ID on checkbox click
                $('#em').on('change', null, function () {
                    if (table.column(0).checkboxes.selected().length > 0) {
                        $('#generateqrcode').attr('disabled', false);
                    } else {
                        $('#generateqrcode').attr('disabled', true);
                    }
                    if (table.column(0).checkboxes.selected().length === 1) {
                        ID = "";
                        $.each(table.column(0).checkboxes.selected(), function (key, value) {
                            ID = value["CODE"];
                        });
                        $('#update').attr('disabled', false);
                        $('#delete').attr('disabled', false);
                    } else {
                        $('#update').attr('disabled', true);
                        $('#delete').attr('disabled', true);
                    }
                });

【讨论】：