DataTables同时配置columnDefs与columns时responsivePriority不生效

这个问题是DataTables列配置的匹配逻辑导致的，核心触发点有两个：

1. columns数组配置不完整。DataTables规定，一旦使用columns参数定义列属性，数组长度必须和表格的实际总列数完全对应，按顺序每一列匹配一个配置对象，哪怕对应列不需要特殊配置，也要留空对象{}占位。如果数组长度和实际列数不符，列索引匹配会直接错乱，columnDefs中用数字索引、-1（代指最后一列）这类规则选列时，就会匹配不到目标列，配置自然不生效。
2. 配置属性写法不兼容。列配置中自定义类名的官方属性名是className，直接写class虽然在部分旧版本能兼容，但新版本下可能干扰列属性的合并逻辑，连带导致columnDefs的扩展属性（比如Responsive插件的responsivePriority）无法正常挂载到对应列上。

根据场景选一种方案即可：

• 方案1：补全columns数组占位，保留columnDefs配置
  先数清表格总列数，把columns数组补到对应长度，不需要特殊配置的列直接写空对象占位，同时把class改成官方推荐的className写法，示例代码如下：

$('#yourTable').DataTable({
  responsive: true, // 必须先开启响应式开关，同时确保已加载Responsive插件的资源
  columnDefs: [
    { responsivePriority: 2002, targets: -1 } // 最后一列优先级最低，窄屏最先隐藏
  ],
  columns: [
    {title: "<?php echo lang("firstname") ?>", className: "text-center w100" }, // 第一列配置
    {title: "用户名" }, // 第二列配置
    {} // 第三列即最后一列，空对象占位，columnDefs配置会自动作用到这列
    // 有多少列就补多少个配置项，不要缺项
  ]
});

• 方案2：直接把响应式优先级配置写到columns对应列中
  列数不多的场景推荐用这种方式，完全绕开columnDefs的索引匹配逻辑，不会出现匹配错误，示例代码如下：

$('#yourTable').DataTable({
  responsive: true,
  columns: [
    // 第一列优先级最高，窄屏最后隐藏
    {title: "<?php echo lang("firstname") ?>", className: "text-center w100", responsivePriority: 1 },
    {title: "用户名" },
    // 最后一列优先级最低，窄屏最先隐藏
    {title: "操作", responsivePriority: 2002 }
  ]
});

排查提示：如果调整配置后还是不生效，先检查是否正确加载了DataTables Responsive扩展的JS、CSS文件，初始化时是否加了responsive: true开关，基础依赖没装对的话所有响应式配置都不会生效。

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