How to use the DataTables fnDestroy method

Question

I use the DataTables plugin for jQuery, but keep getting the following error when I try to use the fnDestroy method:

Undefined 

I tried using all of the following options:

1)

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

2)

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

3)

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

The 'data' object exists - HTML looks like this:

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

The DataTable is built with Javascript (not shown here), but the underlying 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 works great and works well. The problem occurs when I try to execute this function.

Answer 1

It seems that the difference between ...

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

and

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

The DataTable seems to be for API calls to the object, and the dataTable is represented by the intialisation method.

In my project, I changed the initialization to use a DataTable instead of a dataTable to perform a filtering task. After that, my restart of AJAX will cause an "undefined" error, so I changed it back ... I am esta.

Answer 2

If you go to http://www.datatables.net/manual/installation and scroll down, you will see the following:

"Upgrade note: If you are updating DataTables 1.9 or earlier, you may notice that capital is used to initialize DataTable D. $ () DataTable () returns an instance of the DataTables API, and $ (). DataTable () also initializes DataTable, but returns a jQuery object.

See the API manual for more information.

Answer 3

Are you sure you are using fnDestroy in document.ready ? Maybe you get an undefined error because dom is not loaded correctly yet?

It may also mean that your table is incorrect, but I would have to be sure of that.

Take a look at this fiddle that uses your second option and works great: http://jsfiddle.net/timsommer/m5sZU/2/

Answer 4

From datables 1.10 reference:

It is important to note the difference between $ (selector) .DataTable () and $ (selector) .dataTable (). The former returns an instance of the DataTables API, and the latter returns a jQueryJS object. The api () method is added to the jQuery object, so you can easily access the API, but the jQuery object can be useful for working with the node table, like with any other jQuery instance (for example, using addClass (), etc.).

So you can use DataTable (), but then you need to use _table.api (). fnDestroy (); it seems.