Destroy and recreate a jQuery Datatables

jquery datatables create-table destroy
fefe picture fefe · Nov 24, 2017 · Viewed 20.7k times · Source

I have two jQuery datatables with server side processing. I have a checkbox where I hide and show the two tables. I would like to destroy the none displayed and create another table. How would I do this?

This is what I tried but ajax.reload does not fire.

if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})

Answer

Untherxadyus picture Untherxadyus · Nov 12, 2018

In my case, to reset the table I just do this:

$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();

With that you'll reset the table back to it's initial state and you may reinitialize it after that.

Related questions

How to reload/refresh jQuery dataTable?

I am trying to implement functionality whereby clicking a button on the screen will cause my jQuery dataTable to refresh (as the server-side data source may have changed since the dataTable was created). Here's what I have: $(document).ready(function() { $("#…

Read More
Datatables: Cannot read property 'mData' of undefined

I have an issue with Datatables. I also went through this link which didn't yield any results. I have included all the prerequisites where I'm parsing data directly into the DOM. Kindly help me to fix this issue. Script $(document).…

Read More
TypeError: $(...).DataTable is not a function

I am trying to work with jQuery's Datatable JS for my project from this link. I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to …

Read More