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 []”

DataTable分页自定义选择所有行

3 个答案: