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

User · Answer

If you want to refresh the table without adding new data then use this:

First, create the API variable of your table like this:

var myTableApi = $('#mytable').DataTable(); // D must be Capital in this.

And then use refresh code wherever you want:

myTableApi.search(jQuery('input[type="search"]').val()).draw() ;

It will search data table with current search value (even if it's blank) and refresh data,, this work even if Datatable has server-side processing enabled.

User · Answer

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

User · 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

User · Answer

datatable rows   iterator  row   function   context  index         var data   this row index  data        var row     this row index  node         data 0     new data       datatable row row  data data  draw

User · Answer

Another alternative is  dtColumns index  visible   false true    To show or hide any column

User · Answer

I was having same issue  and the solution was working but with some alerts and warnings so here is full solution  the key was to check for existing DataTable object or not  if yes just clear the table and add jsonData  if not just create new               var table              if    fn dataTable isDataTable   example                      table       example   DataTable                    table clear                    table rows add jsonData  draw                              else                   table       example   DataTable                        data   jsonData                       deferRender   true                       pageLength   25                       retrieve   true    Versions   JQuery  3 3 1 DataTable  1 10 20

User · Answer

The following worked really well for me  I needed to redraw the datatable with a different subset of the data based on a parameter  table ajax url  NewDataUrl parameter     param  load     If your data is static  then use this  table ajax url  NewDataUrl   load

[jquery] How to redraw DataTable with new data

Examples related to jquery

Examples related to datatables