使用$.fn.DataTable.tables()时如何销毁指定DataTable表格

报错根因 #

$.fn.DataTable.tables() 返回的是页面上所有绑定了DataTable的原生DOM节点数组，而非DataTable实例对象。原生DOM节点没有.destroy()方法，因此会抛出方法不存在的错误。

可选用修复方案 #

• 方案1：将DOM节点转为DataTable实例后销毁
  如果仍需要通过下标定位目标表格，调用$.fn.DataTable.Api()将获取到的DOM节点转为实例再执行销毁操作：

// 获取所有关联DataTable的表格DOM节点
var allTableDoms = $.fn.DataTable.tables();
// 转换为对应DataTable实例
var targetTable = new $.fn.DataTable.Api(allTableDoms[i-1]);
// 执行销毁，传true可同时移除表格DOM
targetTable.destroy();

• 方案2：初始化时存储实例（更推荐，索引准确性更高）
  初始化每个表格时就将实例存入全局数组，后续销毁直接取对应实例调用方法即可：

// 全局存储实例的数组
var dataTableList = [];
// 初始化时依次存入
dataTableList.push( $('#table1').DataTable({
  // 对应表格的初始化配置
}) );
dataTableList.push( $('#table2').DataTable({
  // 对应表格的初始化配置
}) );

// 销毁指定下标的表格
dataTableList[i-1].destroy();

• 方案3：通过选择器直接获取实例销毁
  如果目标表格有唯一的ID或类名选择器，可以直接定位后调用实例方法：

// 销毁id为target-table的DataTable实例
$('#target-table').DataTable().destroy();

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