Can't destroy() jQuery 数据表

Posted 2023-05-09

【中文标题】Can\'t destroy() jQuery 数据表

【英文标题】：Can't destroy() jQuery Data TableCan't destroy() jQuery 数据表

【发布时间】：2016-11-24 00:52:10

【问题描述】：

我在尝试销毁 JQuery 数据表时遇到问题。

这里是我初始化它的地方：

$(document).ready(function() 
    var table = $(".dynamic-wide-table").DataTable(
        "aaSorting": [],
        "scrollX": true,
        "scrollY": 530,
        "scrollCollapse": true,
        "lengthMenu": [
            [100, 400, 1000, 5000, -1],
            [100, 400, 1000, 5000, "All"]
        ],
        "retrieve": true
    );
);

这是我试图摧毁它的地方：

$(document).ready(function()   // Note that my page has two tables on it!
    table.destroy();
    table[0].destroy();
);        // Trying to delete both tables first, then just the first table

这是我的错误：

Uncaught TypeError: table.destroy is not a function
Uncaught TypeError: table[0].destroy is not a function

有人知道怎么回事吗？！我很困惑。

编辑：

这是我 console.log table 时发生的情况的图像。

【问题讨论】：

它正在工作！ jsfiddle.net/cmedina/7kfmyw6x/79

我的按类选择，并且在单独的文件中启动和销毁。会不会跟这有关系？

如answer 中所述，您应该使用 ID 获取 dataTable 对象并对其调用函数：jsFiddle

我不能使用 ids，因为我每页有多个表，并且在初始化时我不知道 ids 是什么

【参考方案1】：

用 each() 循环实例化表并将它们存储在数组中：

$(document).ready(function() 
        var tables = [];

    $("table").each(function(i)
     var table = $(this).DataTable(
        "aaSorting": [],
        "scrollX": true,
        "scrollY": 530,
        "scrollCollapse": true,
        "lengthMenu": [
            [100, 400, 1000, 5000, -1],
            [100, 400, 1000, 5000, "All"]
        ],
        "retrieve": true
    );
    tables.push(table);
    );

    $('#button').click( function () 
        // Then you can call destroy on that object
        var elem = tables[0].table().node();
        tables[0].destroy();
        // And empty the element
        $(elem).empty()
     );
 );

链接到jsFiddle

【讨论】：

未捕获的类型错误：$(...)[0].DataTable 不是函数

@Nic 调用销毁表实例

我不得不将tables 移出，所以它是全球性的，但除此之外它工作得很好。非常感谢！

【参考方案2】：

您不能同时在$(document).ready() 中创建和销毁 DataTable，因为这些事件是同时触发的。参见@CMedina 的JSfiddle，他在其中展示了它们在由例如按钮单击触发时起作用。 （假设这些在同一个文件中）忽略这部分；显然它们是不同的文件。

请注意，您在评论中说创建/销毁位于不同的文件中。如果确实如此，那么破坏文件是如何知道table 的？如果它不知道 DataTable（这也可能是由于没有在该页面上包含脚本文件造成的），那么它就不会知道 destroy() 做了什么，并抛出错误。

编辑：我刚刚注意到您尝试在table 上使用destroy()，然后在table[0] 上使用。你不能让table 既是一个数据表又是一个数据表数组。尝试在数组中唯一地或同时命名您的表；要么

var table;
table[0] = $('#example').DataTable();
table[1] = $('#example2').DataTable();

或者（可能更好）

var table1 = $('#example').DataTable();
var table2 = $('#example').DataTable();

【讨论】：

main.js，其中包括数据表的创建包含在销毁功能所在的html页面的head部分中。

我添加了一个类似@CMedina 的 JSfiddle 的 onclick。我收到Uncaught TypeError: table[0].destroy is not a function 错误。也试过没有索引并得到Uncaught TypeError: table.destroy is not a function。

添加了我在控制台打印table 时发生的情况的图像。

@Nic DataTables 脚本文件是否包含在销毁功能所在的页面上？

【参考方案3】：

我假设您的页面中有 2 个数据表，并且您的初始化适用于所有具有 .dynamic-wide-table 类的表。

如果只销毁一个表，您应该使用tables 函数获取页面中的所有数据表。

然后对指定的表应用销毁：（在我的示例中使用 2 个数据表）。

$(document).ready(function() 
var table = $(".dynamic-wide-table").DataTable(
    "aaSorting": [],
    "scrollX": true,
    "scrollY": 530,
    "scrollCollapse": true,
    "lengthMenu": [
        [100, 400, 1000, 5000, -1],
        [100, 400, 1000, 5000, "All"]
    ],
    "retrieve": true
);


$('#destroy1').click( function () 
    var dt1 = $.fn.dataTable.tables()[0];
    $(dt1).DataTable().destroy();
 );

$('#destroy2').click( function () 
 var dt2 = $.fn.dataTable.tables()[1];
    $(dt2).DataTable().destroy();
 );
 );

结果： https://jsfiddle.net/cmedina/7kfmyw6x/80/

【讨论】：

$.fn.dataTable.tables() 由于某种原因只包含一个表。但是，console.log(table) 包含 2. @CMedina 。但是，它确实可以删除 1 个表。

请发布您的代码以提供帮助！ (HTML + JS) 完成！

每个表都在自己的引导选项卡中。这可能是它只找到一张桌子的原因吗？ @CMedina

是的，它的原因，选项卡活动隐藏 others.elements