How to Refresh the Content of a DataTable

DaveAH

I am using the DataTable to display the results of a query built by the user. Each query will contain different columns and data. The query results are returned to the page in JSON format with extra metadata. I have built a JQuery function that parses the JSON in order to process the metadata and build two arrays: one with the new column set and one with the new data.

Column Set Format:

dataTitles = [ { "title": "Message" } ];

Data Set Format:

dataSet = [ ['There are no results'] ];

There are commas between each Column and each Data value.

This is how I process the arrays:

$( "#example" ).dataTable({ columns: dataResult[0], data: dataResult[1], destroy: true, empty: true });

dataResult[0] and dataResult[1] are JQuery arrays built in exactly the same form as shown above.

This produces an error detected in the console while in debug mode (F12):

SCRIPT5007: Invalid operand to 'in': Object expected jquery.dataTables.min.js, line 4 character 306

kaiaeberli

Hi Dave,

Destroy doesn't really destroy the table columns I think, it only removes the data. If you need to destroy the columns (for example if their order or name changes) you need the following code, which completely removes the html from the DOM and rebuilds it from scratch:

mytable.destroy(); //removes data but keeps HTML in DOM
$('#div_mytable').html(''); //remove HTML from DOM
$('#div_mytable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="id_mytable"></table>'); //build table

mytable= createDatatable("id_mytable", jsonResponse); //rebuild DataTable object
mytable.draw(); 

Second, you could probably avoid your JSON parsing entirely. Rather than constructing a seperate columns and rows array, you could use this construction:

https://www.datatables.net/forums/discussion/28161/datatables-export-to-excel-how-to-use-alternative-cell-source-in-export-file#latest

Regards,
Kai