DataTable分页自定义选择所有行

Question

我使用DataTable来显示表格，我有3列（参见图片）

问题是，当我单击All时，只选择了显示的分页行，但是当我切换到第2页或其他页面时，没有选择行...

数据表声明

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

TABLE THEAD

<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。

Answer 2

当您单击页码时，此代码将运行。

$('#translation').on('page.dt', function () {
    var info = table.page.info();
    // put any code you want
});

您可以在函数内部实现所有清单。要获取当前页码，请使用info.page。要获取总页数，请使用info.pages。

Answer 3

默认数据表脚本不会取消选中分页中的复选框 请更改您的复选框名称，即name =“ select_all []”