delete all datatables using jQuery
Uncaught TypeError: Cannot read property 'asSorting' of undefined
This seems to suggest it may be trying to destroy dataTable
s that weren't created.
The static fnTables
should give you an Array
of only the <table>
elements with a dataTable
:
var tables = $.fn.dataTable.fnTables(true);
$(tables).each(function () {
$(this).dataTable().fnDestroy();
});
Kreg
Updated on July 05, 2022Comments
-
Kreg almost 2 years
so, I am using datatables along with jQuery, and am a bit stumped as to why this is not working. My HTML looks like this:
<table id="surnamePrimaryPartitionTable" border=1 class="display partitionDisplay"> <caption>Partitions</caption> <thead> <tr style="background-color: #afeeee;"> <th>Partition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> </tr> </thead> <tbody> </tbody> </table>
I have several tables, each of which follows a similar format, and each of which uses the partitionDisplay class (really just a class that I use so that I can select all the tables later using jQuery).
So, the problem arises when I try to destroy the datatables. Here is what I have:
function DeletePartitionInformation(data) { jQuery(".partitionDisplay").each(function(){ jQuery(this).dataTable().fnDestroy(); }); jQuery("table tbody").each(function() { jQuery(this).html(""); }) }
This code seems to work correctly for the first table, but throws an exception and doesn't work on any subsequent tables. The javascript error message I am getting is the following:
Uncaught TypeError: Cannot read property 'asSorting' of undefined
A quick Google search on this error says that it generally arises from having elements nested in a tag. This does not appear to be the problem, however. I will post the code for the other three tables to demonstrate this:
<table id="surnamePrimarySubpartitionTable" border=1 class="display partitionDisplay"> <caption>SubPartitions</caption> <thead> <tr style="background-color: #afeeee;"> <th>Partition</th> <th>SubPartition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> <th>Begin</th> <th>End</th> </tr> </thead> <tbody> </tbody> </table> <table id="givenNullSurnamePartitionTable" border=1 class="display partitionDisplay"> <caption>Partitions</caption> <thead> <tr style="background-color: #98fb98;"> <th>Partition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> </tr> </thead> <tbody> </tbody> </table> <table id="givenNullSurnameSubpartitionTable" border=1 class="display partitionDisplay"> <caption>SubPartitions</caption> <thead> <tr style="background-color: #98fb98;"> <th>Partition</th> <th>SubPartition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> <th>Begin</th> <th>End</th> </tr> </thead> <tbody> </tbody> </table>
One final note: I am actually able to get the behavior I want if I use the below code. Obviously I would prefer not to, however, since I'd really like to loop over the elements rather than hard-code the element id's in.
function DeletePartitionInformation(data) { jQuery("#surnamePrimarySubpartitionTable").dataTable().fnDestroy(); jQuery("#surnamePrimaryPartitionTable").dataTable().fnDestroy(); jQuery("#givenNullSurnameSubpartitionTable").dataTable().fnDestroy(); jQuery("#givenNullSurnamePartitionTable").dataTable().fnDestroy(); jQuery("table tbody").each(function() { jQuery(this).html(""); }) }