user2881063 user2881063 - 4 months ago 54
jQuery Question

How to redraw DataTable with new data

I have checked several questions already about this topic here in stackoverflow, but they are all using the old dataTable. I am using DataTable. I populated my DataTable by NOT USING server side, so data are preloaded (JSON) like this :

datatable = $("#datatable").DataTable({
data : myData,
moreoptions : moreoptions
});


I didn't have a problem with that, the DataTable loaded just fine. Now I want to re-populate that
myData
with new data i uploaded. How to reload the DataTable to reflect the changes?

Here's what I have tried so far :

$('#upload-new-data').on('click', function () {
myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.

datatable.draw(); // Redraw the DataTable
});


But this doesn't work. I also tried this :

datatable = $("#datatable").DataTable({
"data" : myData,
"drawCallback" : function () {
myData = NewlyCreatedData;
},
"moreoptions" : moreoptions,
});


Then on upload I just call the redraw trigger :

$('#upload-new-data').on('click', function () {
datatable.draw(); // Redraw the DataTable
});


Still this doesn't work.

SSA SSA
Answer

You have to first clear the table and then add new data using row.add() function. At last step adjust also column size so that table renders correctly.

$('#upload-new-data').on('click', function () {
   datatable.clear().draw();
   datatable.rows.add(NewlyCreatedData); // Add new data
   datatable.columns.adjust().draw(); // Redraw the DataTable
});

Also if you want to find a mapping between old and new datatable API functions bookmark this

Comments