選擇所有複選框數據表觸發器

Question

我一直在努力解決這個問題幾天。問題是我如何在數據表的全部複選框上點擊'click'來觸發某些東西（在這種情況下，我的按鈕是「禁用」類）？

當用戶單擊複選框時，我已經使觸發器工作，但當用戶單擊全選複選框時，我無法使其工作。請幫助我，謝謝你提前。

這是我的數據表腳本：

$(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

謝謝你的答案。對不起，對於遲到的回覆，我發現我的問題，這是因爲我使用屬性"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); 
        } 
       }); 

Answer 2

嘗試下面的代碼：

$('#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插件中，我們將添加用於選擇所有複選框的事件生成。