Question

我好几天都在努力解决这个问题。问题是我如何在数据表的数据上的“全部选择”复选框上“点击”以触发某些内容（在这种情况下，我的按钮的“禁用”类）？

当用户逐个单击“复选框”时，我会使触发器工作，但是当用户单击“全选”复选框时，我无法使其生效。请提前帮助我。

这是我的Datatables脚本：

$(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);
                }
            });

Answer 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插件的未来版本中，我们将添加事件生成以选择所有复选框。

Answer 2

谢谢你的回答。很抱歉迟到的回复，我发现了我的问题，因为我使用了属性ls /Volumes和"scrollY": "45vh",。如果我将其停用，则＆＃34; selectAll＆＃34;复选框可以轻松触发。我不知道为什么。

这是我的最终代码：

"scrollX": true

而且：

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
            });

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

2 个答案: