如何实现DataTables多页面复选框全选/取消（弃用fnGetNodes）

核心思路 #

使用DataTables 1.10+提供的rows().every() API遍历所有行（包含所有分页的数据），结合行数据存储复选框状态，确保切换分页时状态不丢失。

实现步骤 #

1. 表格结构 #

在表头添加全选复选框，表体每行对应一个独立复选框：

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all"></th>
      <th>Name</th>
      <th>Position</th>
      <!-- 其他业务列 -->
    </tr>
  </thead>
  <tbody>
    <!-- DataTables自动渲染数据行 -->
  </tbody>
</table>

2. 初始化DataTables并配置状态渲染 #

初始化表格时，通过columns.render根据行数据的selected属性动态渲染复选框选中状态：

var table = $('#example').DataTable({
  ajax: '/your-data-api', // 或使用data属性加载本地数据集
  columns: [
    {
      data: null,
      orderable: false, // 禁止该列排序
      render: function(data, type, row) {
        // 根据行数据中的selected字段决定复选框状态
        return `<input type="checkbox" class="row-checkbox" ${row.selected ? 'checked' : ''}>`;
      }
    },
    { data: 'name' },
    { data: 'position' },
    // 其他列配置
  ],
  // 分页、排序等自定义配置
});

3. 绑定全选/取消全选事件 #

点击表头全选框时，遍历所有行更新selected状态，并同步当前页面的复选框：

$('#select-all').on('click', function() {
  var isChecked = this.checked;
  
  // 遍历所有行（覆盖所有分页数据）
  table.rows().every(function() {
    var rowData = this.data();
    rowData.selected = isChecked;
    this.data(rowData); // 更新行数据存储的选中状态
    
    // 若当前行在DOM中，直接修改复选框状态
    var checkbox = $('input.row-checkbox', this.node());
    if (checkbox.length) {
      checkbox.prop('checked', isChecked);
    }
  });
});

4. 绑定单个复选框点击事件 #

点击表体复选框时，更新对应行的selected状态，并同步全选框的选中状态：

$('#example tbody').on('change', '.row-checkbox', function() {
  var $row = $(this).closest('tr');
  var row = table.row($row);
  var rowData = row.data();
  
  // 更新当前行的选中状态
  rowData.selected = this.checked;
  row.data(rowData);
  
  // 检查所有行是否全选，更新表头全选框
  var allChecked = true;
  table.rows().every(function() {
    if (!this.data().selected) {
      allChecked = false;
      return false; // 提前终止遍历提升性能
    }
  });
  
  $('#select-all').prop('checked', allChecked);
});

关键说明 #

• rows().every()：替代旧版fnGetNodes的核心API，可遍历DataTables中所有行（无论是否在当前分页），this.node()可获取当前行的DOM节点。
• 行数据存储状态：通过row.data()存储selected属性，确保切换分页时，DataTables渲染行能根据该属性正确显示复选框状态，避免状态丢失。
• 仅操作复选框：全程只修改复选框的checked状态，未对行本身执行选中操作（如row.select()），完全符合需求。

内容的提问来源于stack exchange，提问作者Kung Fu Ninja