Kann nicht zerstören() jQuery Data Table

Question

Ich habe ein Problem mit dem Versuch, eine JQuery Datentabelle zu zerstören.

Hier ist, wo ich es initialisieren:

$(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 
    }); 
}); 

Hier ist, wo ich versuche, es zu zerstören:

$(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 

Hier sind meine Fehler:

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

Weiß jemand, was ist los ?! Ich bin sehr verwirrt.

bearbeiten:

Hier ist ein Bild von dem, was passiert, wenn ich table console.log.

Answer 1

Instantiate die Tabellen mit each() Schleife und speichert sie in einem Array:

$(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() 
    }); 
}); 

Link zu jsFiddle

Answer 2

Sie können nicht beides schaffen und eine Datatable zerstören innerhalb $(document).ready(), da diese Ereignisse gleichzeitig ausgelöst werden. Siehe @Medinas JSfiddle, wo er zeigt, dass sie funktionieren, wenn sie zum Beispiel durch einen Knopfklick ausgelöst werden. (Angenommen, diese befinden sich in derselben Datei) Ignorieren Sie diesen Teil; anscheinend sind sie verschiedene Dateien.

Beachten Sie, dass Sie in einem Kommentar gesagt haben, dass die Erstellung/zerstören in verschiedenen Dateien sind. Wenn das tatsächlich der Fall ist, wie wird die zerstörende Datei auf table aufmerksam gemacht? Wenn es die DataTable nicht kennt (was auch dadurch verursacht werden kann, dass die Skriptdatei auf dieser Seite nicht enthalten ist), weiß es nicht, was tut, und gibt einen Fehler aus.

Edit: Ich habe gerade bemerkt, dass Sie destroy() auf table und dann auf table[0] versuchen, zu verwenden. Sie können nicht table eine DataTable und auch ein Array von DataTables sein. Versuchen Sie, Ihre Tabellen eindeutig oder in Arrays zu benennen; entweder

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

Oder (wahrscheinlich besser)

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

Answer 3

Ich nehme an, dass Sie zwei Datentabellen auf Ihrer Seite haben, und Ihre initializacion ist für alle Tabellen mit der Klasse .dinamyc-wide-table.

Um nur eine Tabelle zu zerstören, sollten Sie alle Daten auf Ihrer Seite mit tables Funktion erhalten.

Dann wenden Sie destroy auf angegebene Tabelle: (In meinem Beispiel arbeiten mit 2 Databases).

$(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(); 
}); 
}); 

Ergebnis:https://jsfiddle.net/cmedina/7kfmyw6x/80/