如何让DataTable自定义全选复选框选中所有页元素？

核心思路 #

DataTable分页时仅渲染当前页的DOM元素，非当前页的行被移出DOM，所以直接操作DOM只能选中当前页。我们需要通过全局状态跟踪所有选中ID，结合DataTable的事件更新页面渲染状态，同时保留原有复选框的事件和数据属性。

修改后的完整代码 #

JavaScript

// 用Set存储选中的ID，避免重复
let selectedIds = new Set();

$(document).ready(function () {
    // 保存DataTable实例，方便后续操作所有行数据
    const table = $('#example').DataTable({
        "bSort": false,
        "order": []
    });

    // 全选复选框事件
    $(document).on('change', '#chkAll', function () {
        const isChecked = this.checked;
        if (isChecked) {
            // 遍历所有行，收集data-id加入选中集合
            table.rows().every(function() {
                const id = $(this.node()).find('.check').data('id');
                selectedIds.add(id);
            });
        } else {
            // 清空选中集合
            selectedIds.clear();
        }
        // 更新当前页的复选框状态
        table.rows({page: 'current'}).every(function() {
            $(this.node()).find('.check').prop('checked', isChecked);
        });
    });

    // 查看选中按钮事件
    $('#btnCheck').on('click', function () {
        // 将Set转为数组输出
        console.log(Array.from(selectedIds));
    });

    // 行复选框事件（用事件委托处理动态生成的行）
    $(document).on('change', '.check', function () {
        const id = $(this).data('id');
        if (this.checked) {
            selectedIds.add(id);
        } else {
            selectedIds.delete(id);
        }
    });

    // 分页切换/页面重绘时，更新当前页复选框状态
    table.on('draw.dt', function() {
        table.rows({page: 'current'}).every(function() {
            const id = $(this.node()).find('.check').data('id');
            $(this.node()).find('.check').prop('checked', selectedIds.has(id));
        });
    });
});

HTML（无需修改，保持原结构即可）

<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

<button type="button" id="btnCheck">Check selected</button>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th><input type="checkbox" id="chkAll" /></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <!-- 原表格行内容保持不变 -->
        </tbody>
    </table>

关键改动说明 #

1. 全局状态管理：使用Set存储选中ID，避免重复，同时能快速判断某ID是否被选中。
2. 全选逻辑优化：不再直接遍历DOM，而是通过DataTable的rows()方法获取所有行数据，将所有ID加入/移出选中集合，再更新当前页的DOM状态。
3. 事件委托：行复选框的事件绑定改为$(document).on('change', '.check', ...)，确保分页后动态生成的行也能触发事件。
4. 页面重绘同步：监听DataTable的draw.dt事件，每次分页切换或页面重绘时，根据全局集合更新当前页复选框的选中状态，保证视觉状态与实际选中一致。

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