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

Posted 2023-05-09

【中文标题】选择所有复选框数据表触发器

【英文标题】：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);
                
            );

【参考方案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);
                    
                );