如何实现Datatable分页场景下的全选所有复选框功能？

这个问题我太熟悉了！DataTables 默认只会把当前页的行渲染到 DOM 里，所以你原来的全选逻辑只能选中当前可见的复选框，分页里的行根本没在页面上，自然没法被选中。要实现跨分页的全选，得换个思路——用全局状态来跟踪所有选中的行，再结合 DataTables 的 API 来同步状态，而不是直接操作 DOM。

具体实现步骤： #

1. 定义全局变量存储选中状态
   先声明一个数组，用来保存所有选中行的 ID，这样不管怎么切换分页，选中状态都不会丢失：

   // 全局数组，存储所有选中的行ID
   let selectedRows = [];
   

2. 修改主全选框的逻辑
   不再直接操作 DOM 元素，而是用 DataTables 的 API 遍历所有数据行（包括非当前页的），更新全局选中数组和当前页的复选框状态：

   $("#md_checkbox_21").change(function() {
       const table = $('#tbl_user').DataTable();
       if (this.checked) {
           // 遍历所有行，收集ID并标记选中
           table.rows().every(function() {
               const rowId = this.data().test1; // 对应你表格中绑定复选框的字段（mData: 'test1'）
               if (!selectedRows.includes(rowId)) {
                   selectedRows.push(rowId);
               }
               // 同步当前页复选框状态
               $(this.node()).find('.chkall').prop('checked', true);
           });
       } else {
           // 清空选中数组，取消所有复选框选中
           selectedRows = [];
           table.rows().every(function() {
               $(this.node()).find('.chkall').prop('checked', false);
           });
       }
   });
   

3. 绑定行内复选框的点击事件
   因为 DataTables 分页时会重新渲染 DOM，所以要在 draw.dt 事件（每次表格重绘时触发）里绑定复选框的点击事件，同步更新全局选中数组：

   // 表格重绘时（分页、排序、搜索后）绑定事件并恢复选中状态
   $('#tbl_user').on('draw.dt', function() {
       // 先解绑旧事件，避免重复绑定
       $('.chkall').off('change').on('change', function() {
           const rowId = $(this).attr('id').replace('md_checkbox_', ''); // 从复选框ID中提取行ID
           if (this.checked) {
               // 添加到选中数组
               if (!selectedRows.includes(rowId)) {
                   selectedRows.push(rowId);
               }
           } else {
               // 从选中数组移除
               selectedRows = selectedRows.filter(id => id !== rowId);
               // 只要有一个复选框未选中，主全选框就取消选中
               $("#md_checkbox_21").prop('checked', false);
           }
       });
   
       // 切换分页后，根据全局数组恢复复选框的选中状态
       selectedRows.forEach(rowId => {
           $(`#md_checkbox_${rowId}`).prop('checked', true);
       });
   });
   

4. 表格初始化时的注意事项
   确保你的表格初始化代码保持不变，draw.dt 事件会自动在表格第一次渲染和后续分页时触发，无需额外修改初始化逻辑。

额外说明： #

• 如果你的表格有搜索、排序功能，table.rows().every() 会遍历所有过滤后的行，符合业务逻辑；如果需要选中所有原始数据行（包括被过滤掉的），可以改成 table.rows({search:'none'}).every()。
• 这个方案不仅解决了跨分页全选的问题，还能在切换分页、排序、搜索后自动恢复选中状态，用户体验更好。

内容的提问来源于stack exchange，提问作者Nardong Bagsik