How to manually update datatables table with new JSON data

Question

I am using plugin jQuery datatables and load my data which I have loaded in DOM at the bottom of page and initiates plugin in this way   var myData                    id   1           first name    John            last name    Doe                table   dataTable       data  myData         columns              data   id               data   first name               data   last name                Now  after performing some action I want to get new data using ajax  but not ajax option build in datatables - don t get me wrong   and update the table with these data  How can i do that using datatables API  The documentation is very confusing and I can not find a solution  Any help will be very much appreciated  Thanks

User · Answer

You can use       table   dataTable   fnClearTable        table   dataTable   fnAddData myData2     Jsfiddle  Update  And yes current documentation is not so good but if you are okay using older versions you can refer legacy documentation

User · Answer

SOLUTION   Notice  this solution is for datatables version 1 10 4  at the moment  not legacy version   CLARIFICATION Per the API documentation  1 10 15   the API can be accessed three ways   The modern definition of DataTables  upper camel case   var datatable      selector   DataTable     The legacy definition of DataTables  lower camel case   var datatable      selector   dataTable   api     Using the new syntax  var datatable   new   fn dataTable Api  selector      Then load the data like so    get  myUrl   function newDataArray        datatable clear        datatable rows add newDataArray       datatable draw         Use draw false  to stay on the same page after the data update  API references  https   datatables net reference api clear   https   datatables net reference api rows add   https   datatables net reference api draw

User · Answer

Here is solution for legacy datatable 1 9 4      var myData                      id   1           first name    Andy            last name    Anderson                    var myData2                      id   2           first name    Bob            last name    Benson                        table   dataTable         data  myData         aoColumns               mData   id                mData   first name                mData   last name                        table   dataTable   fnClearTable         table   dataTable   fnAddData myData2

User · Answer

You need to destroy old data-table instance and then re-initialize data-table   First Check if data-table instance exist by using   fn dataTable isDataTable   if exist then destroy it and then create new instance like this       if    fn dataTable isDataTable   dataTableExample                  dataTableExample   DataTable   destroy                   dataTableExample   DataTable           responsive  true          destroy  true

User · Answer

In my case  I am not using the built in ajax api to feed Json to the table  this is due to some formatting that was rather difficult to implement inside the datatable s render callback    My solution was to create the variable in the outer scope of the onload functions and the function that handles the data refresh  var table   null  for example    Then I instantiate my table in the on load method    function                         some code here             table       detailReportTable   DataTable                     more code here               and finally  in the function that handles the refresh  i invoke the clear   and destroy   method  fetch the data into the html table  and re-instantiate the datatable  as such   function getOrderDetail                 table clear                table destroy                                  ajax                       api call here                                              table       detailReportTable   DataTable           I hope someone finds this useful

[jquery] How to manually update datatables table with new JSON data

Examples related to jquery

Examples related to datatables

Examples related to jquery-datatables