如何在开启stateSave的jQuery Datatable中应用columnDefs配置

嘿，你遇到的问题其实是两个小细节导致的：初始化参数的格式错误，加上stateSave加载的旧状态覆盖了你的配置，咱们一步步来搞定：

1. 先修正DataTable的初始化格式 #

你之前把配置拆成了两个独立对象传给DataTable()，但DataTable的初始化只接受单个配置对象，这直接导致你的columnDefs根本没被正确读取。把所有配置项合并到一个对象里：

$(document).ready(function() {
  $('#example').DataTable({
    stateSave: true,
    columnDefs: [
      { "orderable": false, "targets": 1 },
      { "orderable": false, "targets": 2 }
    ]
  });
});

2. 处理stateSave的状态覆盖问题 #

如果之前已经用错误配置运行过页面，浏览器本地存储里已经保存了旧的列排序状态，这时候即使修复了初始化配置，DataTable加载状态时还是会覆盖你设置的orderable。这时候需要用stateLoadParams回调来修改加载的状态数据，强制锁定指定列的不可排序属性：

$(document).ready(function() {
  $('#example').DataTable({
    stateSave: true,
    columnDefs: [
      { "orderable": false, "targets": 1 },
      { "orderable": false, "targets": 2 }
    ],
    stateLoadParams: function(settings, data) {
      // 遍历保存的列状态，把第2、3列（索引1、2）强制设为不可排序
      data.columns.forEach((col, index) => {
        if (index === 1 || index === 2) {
          col.orderable = false;
        }
      });
    }
  });
});

为什么你之前的stateLoadParams没起作用？ #

你之前修改的是settings.aoColumns，但DataTable是从data参数（也就是存在本地存储里的状态数据）来恢复配置的，所以得修改data里的列属性，而不是直接改settings。

额外小提示：清空旧的错误状态 #

如果之前的错误状态已经存在于本地存储，你可以手动打开浏览器的开发者工具（Application/Storage标签），找到localStorage里以DataTables_example命名的项删除掉；或者临时把代码里的stateSave设为false，刷新一次页面，再改回true，这样旧状态就被清空了。

这样调整后，就能同时开启stateSave功能，又能保持第2、3列无法排序的配置啦。

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