Codeigniter中Datatable行复选框点击时全选框自动勾选的阻止方法

针对你遇到的点击行复选框时表头全选框自动勾选的问题，核心原因是Datatable的select插件默认会根据当前页的选中行数判断是否勾选表头全选框，但服务端分页场景下这个逻辑会失效。由于是服务端渲染，DOM动态生成，普通jQuery绑定无法生效，需要利用Datatable的内置事件来处理：

解决方案：监听选中/取消选中事件，强制重置表头全选状态 #

初始化Datatable后，绑定select.dt和deselect.dt事件，在每次选中或取消选中行时，手动取消表头全选框的选中状态：

// 初始化Datatable
var yourTable = $('#your-table-id').DataTable({
    serverSide: true,
    ajax: '/your-data-url', // 替换为你的请求地址
    columnDefs: [{
        className: 'select-checkbox custon-user',
        targets: 0,
        checkboxes: {
            selectRow: true
        }
    }],
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    // 其他配置项...
});

// 监听行选中事件，阻止表头全选框自动勾选
yourTable.on('select.dt', function() {
    const headerCheckbox = yourTable.table().header().querySelector('th.select-checkbox input[type="checkbox"]');
    if (headerCheckbox) {
        headerCheckbox.checked = false;
        $(headerCheckbox).closest('th').removeClass('selected');
    }
});

// 监听行取消选中事件，确保表头全选框保持未勾选
yourTable.on('deselect.dt', function() {
    const headerCheckbox = yourTable.table().header().querySelector('th.select-checkbox input[type="checkbox"]');
    if (headerCheckbox) {
        headerCheckbox.checked = false;
        $(headerCheckbox).closest('th').removeClass('selected');
    }
});

原理说明 #

• 通过yourTable.table().header()获取Datatable的表头元素，确保能拿到动态生成的DOM节点，避免普通jQuery选择器的时机问题。
• 每次选中或取消选中行时，直接重置表头复选框的选中状态，并移除Datatable添加的selected样式类，彻底阻止自动勾选逻辑。

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