如何为带分页的HTML DataTable添加全选/取消全选复选框

先梳理原代码的核心问题，再给出完整修复方案：

问题点 #

• 表格tbody内的行未添加复选框，无法实现单独勾选操作
• 原checkAll函数全局获取所有input，会误操作表头复选框，且DataTable分页后，非当前页的行处于DOM隐藏状态，原生方法无法获取这些行的复选框，导致全选仅能作用于当前页
• 未实现表头复选框与行复选框的状态同步（比如手动勾选所有行时，表头复选框未自动选中）

修复后的完整代码 #

第一步：完善HTML表格 #

给tbody每行的第一个td添加复选框，示例如下：

<div class="card-body">
    <table id="example1" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="checkAll" name="chk[]" />
                </th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Department</th>
                <th>Admission Year</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <!-- 示例行，实际可动态生成 -->
            <tr>
                <td valign="middle" align="center" style="width: 2%;">
                    <input type="checkbox" name="chk[]" />
                </td>
                <td>John</td>
                <td>Doe</td>
                <td>Computer Science</td>
                <td>2022</td>
                <td>Active</td>
            </tr>
            <tr>
                <td valign="middle" align="center" style="width: 2%;">
                    <input type="checkbox" name="chk[]" />
                </td>
                <td>Jane</td>
                <td>Smith</td>
                <td>Mathematics</td>
                <td>2021</td>
                <td>Inactive</td>
            </tr>
        </tbody>
    </table>
</div>

第二步：修改JavaScript逻辑 #

利用DataTable的API处理所有行（包括分页隐藏行），同时同步表头与行的复选框状态：

<script>
$(function () {
    // 初始化example1的DataTable，确保分页开启
    const table = $("#example1").DataTable({
        "responsive": true, 
        "lengthChange": false, 
        "autoWidth": false,
        "paging": true
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

    // 全选/取消全选逻辑
    $('#checkAll').on('change', function() {
        // 获取表格所有行的复选框（含分页隐藏行）
        const checkboxes = table.rows().nodes().find('input[type="checkbox"]');
        checkboxes.prop('checked', this.checked);
    });

    // 行复选框点击时，同步表头复选框状态
    $('#example1 tbody').on('change', 'input[type="checkbox"]', function() {
        // 统计已勾选的行数量
        const checkedCount = table.rows().nodes().find('input[type="checkbox"]:checked').length;
        // 获取表格总行数
        const totalRows = table.rows().count();
        // 同步表头复选框状态
        $('#checkAll').prop('checked', checkedCount === totalRows);
    });
});
</script>

关键说明 #

1. 使用table.rows().nodes()获取DataTable管理的所有行节点，无论当前处于哪一页，都能拿到所有行的DOM元素
2. 监听行复选框的change事件，实时统计已勾选数量并与总行数对比，自动更新表头复选框的状态
3. 给表头复选框设置idcheckAll，用jQuery绑定事件更灵活，避免全局函数污染

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