无法销毁()jQuery数据表

cvxl0en2  于 2023-01-16  发布在  jQuery
关注(0)|答案(4)|浏览(210)

我在尝试销毁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时所发生的情况。

o2gm4chl

o2gm4chl1#

使用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

yr9zkbsy

yr9zkbsy2#

不能在$(document).ready()中同时创建和销毁DataTable,因为这些事件是同时触发的。请参见@CMedina的JSfiddle,他在其中展示了它们在由(比如)按钮单击触发时的工作情况。(假设它们在同一个文件中)忽略这一部分;显然它们是不同的文件。
请注意,您在注解中提到创建/销毁在不同的文件中。如果确实如此,销毁文件是如何知道table的?如果它不知道DataTable(也可能是由于在该页面上没有包含脚本文件),那么它将不知道destroy()的功能,并抛出错误。

**编辑:**我刚刚注意到您尝试在table上使用destroy(),然后在table[0]上使用destroy()。您不能让table既是DataTable又是DataTable的数组。请尝试在数组中唯一地命名您的表或同时命名这两个表;或者

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

或者(可能更好)

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

wqnecbli3#

我假设您的页面中有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/

e0uiprwp

e0uiprwp4#

我有同样的问题。虽然只有一个表在我的页面,但我会得到错误:

Uncaught (in promise) TypeError: tbl.destroy is not a function

我的原因是因为没有像这样初始化dataTable:

let tbl = $('#myTable').DataTable();

我把它写成:

let tbl = $('#myTable').dataTable();

请注意用大写字母D书写.DataTable

相关问题