jQuery Datatables隐藏列样式：MVC中AJAX表格指定列样式移除咨询

嘿，这个需求其实很容易搞定，咱们直接在AJAX DataTables的初始化配置里就能完成，不用额外写一堆外部代码～

下面分几种常见场景给你方案：

1. 已知目标列的位置（指定列配置） #

如果你已经明确知道图标列是哪一列（比如索引为2的第三列），可以直接在columns配置里清空该列的样式类，甚至修改图标本身的样式：

$('#your-table-id').DataTable({
  ajax: '/your-mvc-data-endpoint',
  columns: [
    // 其他列的配置，比如：
    { data: 'id' },
    { data: 'name' },
    // 图标列的配置
    { 
      data: 'statusIcon', 
      className: '', // 清空该列所有单元格的样式类（覆盖之前的自定义类或DataTables默认类）
      render: function(data, type, row) {
        // 如果之前的图标带样式类，比如<span class="alert-icon">🔴</span>，这里直接去掉class
        return '<span>' + data.replace(/<span class="[^"]+">/, '<span>').replace('</span>', '') + '</span>';
        // 或者直接返回纯图标HTML，不带任何样式：return data;（如果后端返回的是纯图标标签的话）
      }
    }
  ]
});

2. 动态列场景（用columnDefs定位） #

如果你的列是动态生成的（比如从thead自动识别），可以用columnDefs通过列索引或标题定位目标列：

$('#your-table-id').DataTable({
  ajax: '/your-mvc-data-endpoint',
  columnDefs: [
    {
      targets: 2, // 这里填图标列的索引，也可以用列标题比如'targets: "关注标识列"'
      className: '', // 清空样式类
      // 如果需要彻底移除单元格的内联样式和所有类，还可以加createdCell回调
      createdCell: function(cell) {
        // 移除单元格所有类
        cell.classList.remove(...cell.classList);
        // 移除内联样式
        cell.removeAttribute('style');
      }
    }
  ]
});

3. 彻底清除列的所有样式（包括DataTables默认样式） #

如果连DataTables自带的列样式（比如dt-body-left、dt-head-center这类）都想移除，直接把className设为空字符串就够了，它会覆盖掉所有默认和自定义的列样式类。

这样操作完全在DataTables的初始化方法内完成，刚好符合你的需求～

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