DataTable升级至1.11.3后执行destroy及clear后新增数据报错问题

报错原因 #

1. destroy()执行报错：DataTable 1.11.x版本调整了插件生命周期回调的执行顺序，你使用的colResize第三方插件在表格销毁流程启动时会先清空自身绑定的DT实例引用，但后续DataTable的状态保存回调仍会触发colResize的状态保存逻辑，读取已为空的dt属性导致报错。
2. clear()后新增数据报错：1.11.x版本重构了内部行数据缓存的管理逻辑，比1.10.x的校验逻辑更严格。clear()仅清空了数据内容，未同步重置内部行索引缓存，后续调用新增方法时匹配不到对应的行存储对象，导致赋值_aData时报错。

解决方法 #

方案1：保留销毁重建的逻辑 #

如果你的业务场景适合销毁后重新初始化表格，调整销毁逻辑，先销毁第三方插件实例再销毁DT实例即可：

const grid = $('#testGrid').DataTable();
// 先销毁colResize插件实例，避免状态保存回调触发报错
grid.colResize.destroy();
// 给destroy传true参数，同步清空表格DOM结构
grid.destroy(true);
// 后续按原有逻辑重新初始化表格即可

如果需要保留状态保存功能，可在初始化配置中增加以下回调，规避销毁时的异常触发：

$('#testGrid').DataTable({
  // 其他原有配置不变
  stateSaveParams: function () {
    // 销毁过程中跳过状态保存逻辑
    if (this.isDestroying) return false;
  }
})

方案2：保留现有清空重填逻辑 #

如果不需要销毁重建，仅清空数据后新增，调整清空代码即可：

const testGrid = $('#testGrid').DataTable();
testGrid.clear()
  // 重置所有行的缓存数据，清除旧索引关联
  .rows()
  .invalidate()
  // 传true执行全量重绘，重置所有分页、排序状态
  .draw(true);
// 后续新增数据使用rows.add(新数据数组)，不要复用旧的行实例引用

以上两种方案都可以兼容1.11.3版本的逻辑，调整后即可正常运行。

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