delete all datatables using jQuery

Question

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

Answer 1

Uncaught TypeError: Cannot read property 'asSorting' of undefined

This seems to suggest it may be trying to destroy dataTables 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();
});