Angular 5 DataTables重渲染触发警告及数据回退问题咨询

这个警告的核心原因是：你在销毁DataTables实例后，再次调用dtTriggerContent.next()触发初始化时，DataTables检测到当前表格已经被初始化过（即使你销毁了实例，DOM中可能还残留着初始化标记，或者angular-datatables的内部状态没完全清理），因此抛出"Cannot reinitialise DataTable"的警告。

下面给你两种解决方案，优先推荐第一种更高效的方式：

方案一：直接用DataTables API更新数据（推荐） #

不需要销毁和重新渲染整个表格，而是通过DataTables的实例API直接更新数据，这样既不会触发警告，性能也更好。修改你的addSocial方法如下：

addSocial(role: number, rewardName: string, carrot: number): void {
  if(!isNaN(carrot)) {
    // 这里保留你设置rewardTemp的逻辑
    this.adminService.addReward(this.rewardTemp)
      .subscribe(reward => {
        this.rewards.push(reward);
        // 获取DataTables实例并更新数据
        this.dtElementContent.dtInstance.then((dtInstance: DataTables.Api) => {
          // 清除现有数据缓存
          dtInstance.clear();
          // 添加更新后的完整数据集
          dtInstance.rows.add(this.rewards);
          // 重新绘制表格
          dtInstance.draw();
        });
        // 这里保留你的成功提示逻辑
      });
  } else {
    // 这里保留你的错误提示逻辑
  }
}

这种方式的好处是复用了已有的DataTables实例，避免了重复初始化的问题，同时分页、排序状态也能更好地保留（如果需要的话，也可以通过API重置状态）。

方案二：允许重新初始化表格（适合复杂场景） #

如果你因为某些原因必须销毁并重新渲染表格，可以通过配置destroy: true来让DataTables允许重新初始化实例：

1. 首先修改你的dtOptions配置：

dtOptionsContent: DataTables.Settings = {
  destroy: true, // 添加这个配置，允许重新初始化
  // 其他原有配置
};

2. 同时在组件销毁时清理dtTrigger，防止内存泄漏：

ngOnDestroy(): void {
  this.dtTriggerContent.unsubscribe();
}

这样修改后，再次调用dtTriggerContent.next()时，DataTables会自动销毁旧实例并创建新实例，不会再抛出警告。

为什么原来的代码会报错？ #

你之前的代码中，虽然调用了dtInstance.destroy()，但angular-datatables的dtTrigger是一个Subject，每次next()都会触发初始化流程。而DataTables默认不允许对同一个表格元素重复初始化，除非显式设置destroy: true，因此就会弹出那个警告。

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