javascript - delete all datatables using jQuery - Stack Overflow

admin管理员组

文章数量:1245089

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

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

• javascript
• jquery
• html
• datatables

Share Improve this question Follow edited Jan 22, 2013 at 23:12 Kreg asked Jan 22, 2013 at 23:04 KregKreg 64711 gold badge66 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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

本文标签： javascriptdelete all datatables using jQueryStack Overflow