javascript 使用 jQuery 删除所有数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14469699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
delete all datatables using jQuery
提问by Kreg
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:
因此，我将数据表与 jQuery 一起使用，并且对于为什么这不起作用感到有些困惑。我的 HTML 如下所示：
<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).
我有几个表，每个表都遵循类似的格式，每个表都使用 partitionDisplay 类（实际上只是我使用的一个类，以便我以后可以使用 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:
此代码似乎对第一个表正常工作，但引发异常并且不适用于任何后续表。我收到的 javascript 错误消息如下：
Uncaught TypeError: Cannot read property 'asSorting' of undefined
未捕获的类型错误：无法读取未定义的属性“asSorting”
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.
最后一点：如果我使用下面的代码，我实际上能够获得我想要的行为。然而，显然我不想这样做，因为我真的很想遍历元素而不是对元素 id 进行硬编码。
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("");
})
}
回答by Jonathan Lonowski
Uncaught TypeError: Cannot read property 'asSorting' of undefined
未捕获的类型错误：无法读取未定义的属性“asSorting”
This seems to suggest it may be trying to destroy dataTables that weren't created.
这似乎表明它可能试图销毁dataTable未创建的 s。
The static fnTablesshould give you an Arrayof only the <table>elements with a dataTable:
在静态fnTables应该给你一个Array唯一的的<table>一个元素dataTable：
var tables = $.fn.dataTable.fnTables(true);
$(tables).each(function () {
$(this).dataTable().fnDestroy();
});
