ASP.NET MVC DataTable分页全选复选框功能实现求助

问题分析 #

当前全选逻辑仅操作页面DOM中存在的复选框，但DataTable分页机制下，非当前页的行不会渲染到DOM中，导致切换页面后全选状态无法同步。需要借助DataTable的API操作所有数据行，并在表格重绘时同步复选框状态。

步骤1：修正脚本加载顺序 #

你的脚本加载顺序错误，必须先加载jQuery，再加载DataTable脚本，最后初始化表格：

<script src="~/Scripts/jquery-3.7.0.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>

步骤2：修改全选逻辑与表格初始化 #

移除重复的DataTable初始化代码，改用以下完整脚本，包含全选状态维护与跨页同步：

// 全局变量记录全选状态
let isSelectAll = false;

$(document).ready(function () {
    const table = new DataTable('#example', {
        initComplete: function () {
            this.api()
                .columns()
                .every(function (index) {
                    let column = this;
                    let title = column.footer().textContent;

                    if (index === 0) {
                        // 跳过第一列
                        return;
                    }

                    // 创建列搜索输入框
                    let input = document.createElement('input');
                    input.placeholder = title;
                    column.footer().replaceChildren(input);
                    input.addEventListener('keyup', () => {
                        if (column.search() !== input.value) {
                            column.search(input.value).draw();
                        }
                    });
                });
        },
        // 表格重绘时同步复选框状态
        drawCallback: function() {
            // 根据全选状态设置当前页所有复选框
            this.api().rows({ page: 'current' }).every(function() {
                const checkbox = $(this.node()).find('input.rowCheckbox')[0];
                if(checkbox) {
                    checkbox.checked = isSelectAll;
                }
            });
            // 同步顶部全选框状态
            $('#selectAll').prop('checked', isSelectAll);
        }
    });

    // 全选框点击事件
    $('#selectAll').on('change', function() {
        isSelectAll = this.checked;
        const chcn = this.value;

        // 通过API操作所有行的复选框
        table.rows().every(function() {
            const checkbox = $(this.node()).find('input.rowCheckbox')[0];
            if(checkbox) {
                checkbox.checked = isSelectAll;
            }
        });

        // 保留你的AJAX请求逻辑
        $.ajax({
            url: "/Admin/OstadCourses/CheckboxAll",
            type: "POST",
            data: { chcn, flag: isSelectAll },
            error: function () {
                alert("Error!");
            }
        });
    });
});

步骤3：移除原有的onchange绑定 #

将表单中全选框的onchange="challflag(this)"移除，因为我们已经通过jQuery绑定了事件：

<input class="rowCheckbox" type="checkbox" id="selectAll" style="margin-right: 5px; width: auto;" value="@select" />

关键说明 #

• 使用table.rows().every()遍历DataTable的所有数据行，而非仅当前DOM中的行
• 通过drawCallback事件在表格分页、搜索重绘时，同步当前页复选框的全选状态
• 用全局变量isSelectAll维护全选状态，确保切换页面时状态一致

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