How can I destroy datatable

Question

I have a datatable, and the table has an example ID.

Now I need to destroy the datatable, and I write:

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

but I get:

Uncaught TypeError: cannot read the 'style' property from undefined

and this I get in the console log:

What is the problem? Why can't I destroy data? How to solve this?

Answer 1

For the latest version of the data, use:

$('#example').DataTable().destroy();

Refer to this further: https://datatables.net/reference/api/destroy%28%29

For older versions, use as directed by Hobo Sapiens:

$('#example').DataTable().fnDestroy();

Answer 2

Here is what ultimately worked for me with v1.10.

// Define a variable for your dataTable object to use
var reportListDataTable = null;

// Then inside a function/method somewhere...

// Destroy the dataTable and empty because the columns may change!
if (reportListDataTable !== null ) {
    // for this version use fnDestroy() instead of destroy()
    reportListDataTable.fnDestroy();
    reportListDataTable = null;
    // empty in case the columns change
    $('#reportListTableId').empty();
}

// Build dataTable with ajax, columns, etc.
reportListDataTable = $('#reportListTableId').dataTable({
    //... Your dataTables code here
});

Answer 3

what worked for me is to destroy the dataTable when the insert button is clicked, and not on the extract data button. Thus, the button that destroys the dataTable does not recreate the table. And another function that is called from another button click creates a dataTable. the code is simple:

Button that destroys dataTable:

var otable = $('#claimRecordTable').dataTable();
if (otable != null) otable.fnDestroy();

which created dataTable:

$('#claimRecordTable').dataTable();