使用jQuery删除所有数据表 [英] delete all datatables using jQuery

问题描述

所以，我正在使用数据表和jQuery，并且有点难过为什么这不起作用。我的HTML看起来像这样：

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>

我有几个表，每个表都遵循类似的格式，每个表都使用partitionDisplay类（实际上只是我使用的一个类，以便我以后可以使用jQuery选择所有表。）

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

此代码似乎对第一个表正常工作，但抛出异常并且不适用于任何后续表。我收到的javascript错误消息如下：

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:

未捕获的TypeError：无法读取未定义的属性'asSorting'

Uncaught TypeError: Cannot read property 'asSorting' of undefined

对此错误的Google快速搜索表明，它通常源于嵌套在标记中的元素。然而，这似乎不是问题。我将发布其他三个表的代码来证明这一点：

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>

最后一点：如果我使用下面的代码，我实际上能够得到我想要的行为。但是，显然我不愿意，因为我真的想循环使用元素，而不是硬编码元素id。

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

推荐答案

未捕获的TypeError：无法读取属性'asSorting'未定义

Uncaught TypeError: Cannot read property 'asSorting' of undefined

这似乎暗示它可能试图销毁 dataTable 未创建的。

This seems to suggest it may be trying to destroy dataTables that weren't created.

静态 fnTables 应该只为< table>提供数组 元素 dataTable ：

var tables = $.fn.dataTable.fnTables(true);

$(tables).each(function () {
    $(this).dataTable().fnDestroy();
});

这篇关于使用jQuery删除所有数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！