Таблицы данных меняют флажки на всех страницах

Question

Я использую DataTables, чтобы указать, какие «события» отображаются на каждой странице моего веб-приложения.

Для каждой страницы у меня есть столбец, и каждое событие представляет собой строку с флажками на странице. (Чтобы дать вам представление о том, как это выглядит: http://i.stack.imgur.com/6QhsJ.png)

Когда я нажимаю на страницу, он должен проверять все флажки, однако флажки отмечены только на текущей странице DataTable.

Любая помощь приветствуется!

Edit: вот 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); 
    }); 
});