使用 jQuery 删除所有数据表

Question

所以，我将数据表与 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>

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

所以，当我尝试销毁数据表时，问题就出现了。这是我所拥有的：

function DeletePartitionInformation(data) {
  jQuery(".partitionDisplay").each(function(){
    jQuery(this).dataTable().fnDestroy();
  });
  jQuery("table tbody").each(function() {
    jQuery(this).html("");
  })
}

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

未捕获的类型错误：无法读取未定义的属性“asSorting”

对这个错误的快速谷歌搜索表明它通常是由嵌套在标签中的元素引起的。然而，这似乎不是问题。我将发布其他三个表的代码来演示这一点：

<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 所在的位置。

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

Answer 1

未捕获的类型错误：无法读取未定义的属性“asSorting”

这似乎表明它可能试图销毁未创建的dataTables。

static fnTables 应该为您提供一个 Array，其中只有带有 dataTable 的 <table> 元素：

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

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