How to redraw DataTable with new data

Question

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.

Answer 1

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

Answer 2

The accepted answer calls the draw function twice. I can't see why that would be needed. In fact, if your new data has the same columns as the old data, you can accomplish this in one line:

datatable.clear().rows.add(newData).draw();