Datatables设置visible:false不生效：第6列无法隐藏

嘿，我来帮你排查这个头疼的问题！首先先理清楚列的索引对应关系——DataTables里列是从0开始计数的，所以你说的第6列（Rating）对应的索引是5，先把这个对应关系记牢，这很关键。

你提到第1列（ID，索引0）和第7列（Skill ID，索引6）隐藏正常，唯独Rating列不行，我整理了几个最可能的原因和解决办法：

1. 先检查columns配置的对应关系 #

你贴的JS代码里columns部分没写完，大概率是这里的顺序或者配置出了问题。要知道DataTables的columns数组必须和HTML表头的列顺序完全一一对应，哪怕要隐藏的列也不能跳过不写，否则索引错位就会导致隐藏的不是你想要的列。

给你一个正确的配置示例，你可以对照着改：

var certificationTable;
certificationTable = $('#certificationTable').DataTable({
    serverSide: true,
    processing: true,
    stateSave: true,
    ajax: {
        url: "{!! route('listOfUsersSkills',['1']) !!}",
        type: "POST",
        dataType: "JSON"
    },
    columns: [
        { name: 'skill_user.id', visible: false }, // 第1列（ID）隐藏，对应索引0
        { name: 'skill_user.domain' }, // Domain，索引1
        { name: 'skill_user.sub_domain' }, // Sub Domain，索引2
        { name: 'skill_user.technology' }, // technology，索引3
        { name: 'skill_user.certification_name' }, // Certification Name，索引4
        { name: 'skill_user.rating', visible: false }, // 你要隐藏的Rating列，索引5，设置visible: false
        { name: 'skill_user.skill_id', visible: false } // Skill ID，索引6，隐藏
    ]
});

重点确认：columns数组的长度和HTML表头里<th>的数量一致，每个列的顺序完全匹配，目标列的visible: false确实写对了位置。

2. 看看stateSave是不是在“捣乱” #

你开启了stateSave: true，这个功能会把用户之前的表格状态（比如列的显示/隐藏）存在浏览器的本地存储里。如果之前你曾经手动打开过Rating列，DataTables会记住这个状态，直接覆盖你代码里的隐藏设置。

解决办法很简单：

• 先临时注释掉stateSave: true，刷新页面看看列能不能正常隐藏，如果可以，那就是缓存的问题
• 要是想保留stateSave功能，可以清除浏览器的本地存储（找到DataTables相关的缓存项删掉），或者初始化时强制重置状态：

certificationTable = $('#certificationTable').DataTable({
    // 其他配置不变
    stateSave: true,
    stateLoadCallback: function(settings, callback) {
        // 重置之前的状态，让初始化配置生效
        callback({});
    }
});

3. 排查有没有其他代码覆盖了设置 #

说不定你的代码里有其他地方调用了column().visible()方法，动态修改了列的可见性，比如可能有类似certificationTable.column(5).visible(true)这样的语句，把你初始化的设置给覆盖了。可以搜一下项目里的相关代码，看看有没有这类逻辑，调整一下就行。

4. 检查HTML表头的结构 #

最后再确认一下HTML的<thead>部分，确保里面的<th>数量和columns数组的长度完全一致，没有多余或者遗漏的列，也没有嵌套错误的结构——要是表头列数不对，索引直接就错位了，你设置的可能根本不是Rating列。

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