數據表更改所有頁面上的複選框

Question

我使用數據表來列出在我的Web應用程序的每個頁面上顯示哪些「事件」。

對於每個頁面，我有一個列，每個事件是每行有複選框的行。 （讓你知道它是什麼樣的：http://i.stack.imgur.com/6QhsJ.png）

當我點擊一個頁面時，它應該檢查所有的複選框，但是複選框只在DataTable的當前頁面上被選中。

任何幫助表示讚賞！

編輯：這裏是我的問題的jsfiddle（https://jsfiddle.net/2n3dyLhh/2/）

HTML

<table id="eventsTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Checkbox<input type="checkbox" id="checkall"/></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td><input type="checkbox" id="checkbox1"/></td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td><input type="checkbox" id="checkbox2"/></td> 
     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td><input type="checkbox" id="checkbox3"/></td> 
     </tr> 
     <tr> 
      <td>Cedric Kelly</td> 
      <td><input type="checkbox" id="checkbox4"/></td> 
     </tr> 
     <tr> 
      <td>Airi Satou</td> 
      <td><input type="checkbox" id="checkbox5"/></td> 
     </tr> 
     <tr> 
      <td>Brielle Williamson</td> 
      <td><input type="checkbox" id="checkbox6"/></td> 
     </tr> 
     <tr> 
      <td>Herrod Chandler</td> 
      <td><input type="checkbox" id="checkbox7"/></td> 
     </tr> 
     <tr> 
      <td>Rhona Davidson</td> 
      <td><input type="checkbox" id="checkbox8"/></td> 
     </tr> 
     <tr> 
      <td>Colleen Hurst</td> 
      <td><input type="checkbox" id="checkbox9"/></td> 
     </tr> 
     <tr> 
      <td>Sonya Frost</td> 
      <td><input type="checkbox" id="checkbox10"/></td> 
     </tr> 
     <tr> 
      <td>Jena Gaines</td> 
      <td><input type="checkbox" id="checkbox11"/></td> 
     </tr> 
     <tr> 
      <td>Quinn Flynn</td> 
      <td><input type="checkbox" id="checkbox12"/></td> 
     </tr> 
    </tbody> 
</table> 

的JavaScript

$(document).ready(function() { 
    $.extend($.fn.dataTable.defaults, { 
     "columns": [null, { "orderable": false }] 
    }); 
    $('#eventsTable').DataTable(); 
}); 

$("#checkall").on('click', function() { 
    if (this.checked) { 
     for(var i = 1; i <= 12; i++) { 
      var id = "#checkbox" + i; 
      $(id).prop('checked', true); 
     } 
    } else { 
     for(var i = 1; i <= 12; i++) { 
      var id = "#checkbox" + i; 
      $(id).prop('checked', false); 
     } 
    } 
}); 

Answer 1

你的點擊處理程序應改爲：

$("#checkall").on('click', function() { 
    $('#eventsTable').DataTable() 
     .column(1) 
     .nodes() 
     .to$() 
     .find('input[type=checkbox]') 
     .prop('checked', this.checked); 
}); 

有關代碼和演示，請參見this example。

考慮使用jQuery DataTables Checkboxes更容易處理由jQuery DataTables支持的表格中的複選框。

Answer 2

$("#chbox").click(function() { 
    //chbox is main checkbox 
    var rows,checked; 
    var rows = $("#viewlist").dataTable().$('tr', {"filter": "applied"});// viewlist is 
    checked = $(this).prop('checked'); 
    $.each(rows, function() { 
     var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked); 
    }); 
});