如何销毁数据表

Posted 2023-02-22

【中文标题】如何销毁数据表

【英文标题】：How can I destroy a datatable

【发布时间】：2015-04-29 13:54:02

【问题描述】：

我有数据表，表有 ID 示例。

现在我需要销毁数据表并写：

$('#example').dataTable().fnDestroy();

但我明白了：

未捕获的类型错误：无法读取未定义的属性“样式”

这也是我在控制台日志中得到的：

这里有什么问题？为什么我不能销毁数据表？如何解决？

【问题讨论】：

你可能想要$('#example').DataTable().fnDestroy(); - 注意大写D。使用dataTable（带有d）返回一个jQuery对象。

是的，但现在我得到：Uncaught TypeError: undefined is not a function

所以大写的“D”在这里不是问题

你能不能 console.log $('#example').dataTable() 看看它是否是我们所期望的

"有没有办法销毁表"，是的 - 你做对了 - 请参阅这个 1.9.x 示例 -> jsfiddle.net/fdfm04gL <instance>.fnDestroy(), 、$('#example').DataTable().fnDestroy() 或 $('#example').dataTable().fnDestroy() - 这三种方法都适用于 1.9.x。所以你的问题依赖于其他地方，你能在小提琴中重现错误吗？我猜你在 fnDestroy()

之前以某种方式操纵了注入的 DOM

【参考方案1】：

对于最新版本的数据表，请使用：

$('#example').DataTable().destroy();

更多信息请参考：https://datatables.net/reference/api/destroy%28%29

对于旧版本，请按照 Hobo Sapiens 的说明使用：

$('#example').DataTable().fnDestroy();

【讨论】：

如果你得到“但现在我得到：Uncaught TypeError: undefined is not a function”，那么你可能会导入 jquery 两次。

不，$('#example').DataTable().fnDestroy() 和 $('#example').dataTable().fnDestroy() 都适用于 1.9.x

我在使用 .destroy(); 时遇到同样的错误； ：未捕获的类型错误：无法读取未定义的属性“样式”

@davidkonrad，先生，如果我在模态中使用它会怎样？我的模态中有一个表格，然后使用 ajax 调用数据..

@d_unknown，问问题，我回答

【参考方案2】：

这是 v1.10 最终对我有用的内容。

// Define a variable for your dataTable object to use
var reportListDataTable = null;

// Then inside a function/method somewhere...

// Destroy the dataTable and empty because the columns may change!
if (reportListDataTable !== null ) 
    // for this version use fnDestroy() instead of destroy()
    reportListDataTable.fnDestroy();
    reportListDataTable = null;
    // empty in case the columns change
    $('#reportListTableId').empty();


// Build dataTable with ajax, columns, etc.
reportListDataTable = $('#reportListTableId').dataTable(
    //... Your dataTables code here
);

【讨论】：

即使使用 v1.10，它仍然取决于您使用的是 dataTable() 还是 DataTable()。注意“大写 D”。

【参考方案3】：

对我有用的是在单击插入按钮时破坏数据表，而不是在获取数据按钮上。所以破坏 dataTable 的按钮不是重新创建表。从其他按钮单击调用的其他一些函数会创建数据表。 代码很简单：

破坏数据表的按钮：

var otable = $('#claimRecordTable').dataTable();
if (otable != null) otable.fnDestroy();

创建数据表的按钮：

$('#claimRecordTable').dataTable();