( changing the content and the column structure).
Unfortunately I couldn't find a way to do it in one go.
There is the table.fnDestroy(true);
but this removes the <table>
element from the page as well.
We could use this but then we need to wrap the table element in a div in order to have a place where to
recreate the table.
It seem easyer to:
table.fnClearTable(); // clear all the rows ( not really necessary since we call empty() at the end)
table.fnDestroy(); // remove table enhancements
$('#theTable').empty() // empty the table content ( this remove the rows)
table = $('#theTable').dataTable(config); // recreate the table with the new configuration
Beware of using fnClearTable to destroy the table! If you are using server-side processing calling this method before calling fnDestroy forces the table to go fetch new data from the server and then re-creating the table invokes a second call to the server to fetch data, resulting in double calls.