jquery - DataTable分页自定义选择所有行

Question

我使用DataTable为了显示我的表格，我有 3 列(参见图片)

问题是，当我单击All时，仅选择分页显示的行，但当我更改为第2页或其他页面时，不会选择行...

数据表声明

var table = $('#translations').DataTable({
    dom: 'rtl<"text-center" ip>',
    ordering: false,
    pageLength: 25
});

table 头

<thead>
    <tr>
        <th class="col-xs-1"><input type="checkbox" name="select_all" id="select_all" onClick="selectAll(this)">&nbsp;All</th>
        <th class="col-xs-5">Term</th>
        <th class="col-xs-6">Translation</th>
    </tr>
</thead>

选择所有点击

function selectAll(source) {
    checkboxes = document.getElementsByName('selectCb');

    for(var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;

    }
}

Answer 1

通过在 DOM 上使用 jQuery，您只能访问可见行。您将需要访问表的 dataTables 内部版本，即它的“缓存”。这是一个“checkall”函数，它迭代所有行，更改具有 .checkbox1 类的复选框的选中状态:

$('#select_all').click(function(event) {  //on click 
  var checked = this.checked;
  table.column(0).nodes().to$().each(function(index) {    
    if (checked) {
      $(this).find('.checkbox1').prop('checked', 'checked');
    } else {
      $(this).find('.checkbox1').removeProp('checked');            
    }
  });    
  table.draw();
});

如果您使用此代码，则可以删除该 Onclick 函数

使用to$()让我们立即使用 jQuery 处理内容。