WAMP环境PHP MVC项目使用DataTables时复选框列被隐藏求助

你遇到的复选框被隐藏的问题，和后端PHP批量删除逻辑完全无关，是两个前端代码的叠加问题导致的：

• 首先是HTML表头结构存在不符合规范的嵌套错误：你在<thead>标签内先写了一个<tr class="danger">，紧接着又在这个tr内部嵌套了第二个<tr class="danger">。按照HTML标准，tr标签是thead/tbody的直接子元素，内部不允许再嵌套同层级的tr标签，浏览器会自动把外层的空tr识别为独立的表头行，导致DataTables初始化时计算的总列数出现错位。
• 其次是表格引入了dt-responsive nowrap响应式类，这是DataTables响应式扩展的内置样式类，开启后会自动根据表格可视宽度判定列的优先级，隐藏宽度不足的次要列。因为前面列数计算错位，它会把最右侧的复选框列判定为需要隐藏的次要列，自动加上隐藏样式。

这也完全匹配你测试的现象：去掉表格上的id="mtab"属性后，原生Bootstrap表格没有自动计算列数、响应式隐藏的逻辑，哪怕结构有瑕疵，也会正常渲染所有复选框和功能。

第一步：修正表头嵌套结构 #

删掉嵌套的重复空tr，改成符合规范的表头写法：

<thead class="thead-dark">
  <tr class="danger">
    <th scope="col">ID</th>
    <th scope="col">Pack Name</th>
    <th scope="col">Select</th>
  </tr>
</thead>

调整后表头和tbody的列数完全对齐，DataTables的列索引计算不会再出现错位。

第二步：在DataTables初始化时固定复选框列的展示属性 #

就算结构修正完成，后续如果表格内容增多导致宽度不足，响应式插件还是有可能误隐藏复选框列，因此在初始化配置中明确锁定这一列的展示优先级，调整后的初始化脚本：

$(document).ready(function(){
    $("#mtab").DataTable({
        columnDefs: [
            { 
                targets: -1, // 定位到最后一列，也就是你的复选框列
                responsivePriority: 1, // 设置最高展示优先级，无论表格宽度多窄都不会被自动隐藏
                orderable: false, // 关闭复选框列的排序功能，避免无意义的交互
                className: 'dt-center' // 可选：让复选框在单元格内居中，优化视觉效果
            }
        ]
    });
});

• 改完后先强制刷新浏览器清掉缓存，避免旧的DOM结构和样式残留导致修复不生效。
• 原有后端批量删除的代码不需要做任何调整，复选框的name="delete[]"和绑定的ID值都没有改动，表单提交的批量删除逻辑完全可以正常运行。
• 不需要移除dt-responsive类，只要按照上面的配置给复选框列加最高优先级，既可以保留表格适配不同屏幕宽度的响应式能力，也不会再出现复选框被隐藏的问题。

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