How to use DataTables fnDestroy method

Question

I am using the DataTables plugin for jQuery but keep getting the following error when I attempt to use the fnDestroy method:

Undefined

I have tried using all of the following variants:

1)

 $('#data').dataTable().fnDestroy();

2)

var dt = $('#data').dataTable();
dt.fnDestroy();

3)

var data = document.getElementById('data');
data.fnDestroy();

The 'data' object exists - The HTML is as follows:

<div class="resultset">
     <table class="display" id="data">              
         <tbody>

         </tbody>
      </table>  
</div>

The DataTable is built with Javascript (not shown here), but the base object is hard-coded.

The API documentation shows that the second method should work:

$(document).ready(function() {
  // This example is fairly pointless in reality, but shows how fnDestroy can be used
  var oTable = $('#example').dataTable();
  oTable.fnDestroy();
} );

EDIT

The DataTable displays fine and otherwise works well. The issue arises when I attempt to execute this function.

Answer 1

It seems to be the difference between...

_table = jQuery('table#fp-table-table').dataTable(); // .fnDestroy() works

and

_table = jQuery('table#fp-table-table').DataTable(); // .fnDestroy() doesn't work

DataTable seems to be for API calls back into the object and dataTable seems to be the intialisation method.

In my project I had changed the initialisation to use DataTable instead of dataTable to perform a filtering task. After this my AJAX reloads would throw the 'undefined' error, so I changed it back... i esta.