How to reload the datatable jquery data

Question

How to reload the selected tab  Actually I have problem with reloading part  When I add my data I ll successfully saved in datatable but in id field in database it shows proper id  but when I add the detail its not shows id in datatable    before refresh the summary tab  here is example it shows something like this in datatable id patient husband age            so on       xyz abc 23        so on      after refreshing manually  but when I refresh my page it show successfully  like this in datatable  id patient husband age            so on    13 xyz abc 23         so on     But exactly I want when I add my detail it should automatically refresh the selected tab   My code is below    lt button type  button   a href  javascript void 0    onclick  fnClickAddRow     gt Add Summary lt  button gt   function fnClickAddRow event         table scroll   dataTable   fnAddData         patientt   val       husband   val       age   val       opu no   val       date   val       proc   val       no of eggs   val       fert   val       et date   val       et day   val       et   val       fz   val       bioch preg   val       clin preg   val       fh   val       comment   val          var datastring     Form summary  serialize       ajax       type   POST       url   summaryajax php       data  datastring       success  function response     alert response                    I also tired this approach but no success   I want my datatable to refresh the data  function fnClickAddRow event     var datastring     Form summary  serialize       ajax       type   POST       url   summaryajax php       data  datastring       success  function response              table scroll   dataTable   fnAddData              resposne      patientt   val        husband   val       age   val                    opu no   val        date   val       proc   val        no of eggs   val                     fert   val       et date   val        et day   val        et   val                     fz   val        bioch preg   val        clin preg   val        fh   val                     comment   val

User · Answer

None of these solutions worked for me  but I did do something similar to Masood s answer  Here it is for posterity  This assumes you have  lt table id  mytable  gt  lt  table gt  in your page somewhere   function generate support user table                 mytable   hide                mytable   dataTable                                bDestroy   true               fnInitComplete   function          support user table   show                                       The important parts are    bDestroy  which wipes out the current table before loading  The hide   call and fnInitComplete  which ensures that the table only appears after everything is loaded  Otherwise it resizes and looks weird while loading    Just add the function call to   document  ready   and you should be all set  It will load the table initially  as well as reload later on a button click or whatever

User · Answer

Get the url from the Settings of the table  oSettings sAjaxSource  function refreshTable oTable        table   oTable dataTable        oSettings   table fnSettings           Retrieve the new data with   getJSON  You could use it ajax too       getJSON oSettings sAjaxSource  null  function  json             table fnClearTable this            for  var i 0  i lt json aaData length  i                  table oApi  fnAddData oSettings  json aaData i                       oSettings aiDisplay   oSettings aiDisplayMaster slice            table fnDraw

User · Answer

Use the fnReloadAjax   by the DataTables net author   I m copying the source code below - in case the original ever moves     fn dataTableExt oApi fnReloadAjax   function   oSettings  sNewSource  fnCallback  bStandingRedraw         if   typeof sNewSource     undefined   amp  amp  sNewSource    null                 oSettings sAjaxSource   sNewSource            this oApi  fnProcessingDisplay  oSettings  true        var that   this      var iStart   oSettings  iDisplayStart      var aData            this oApi  fnServerParams  oSettings  aData         oSettings fnServerData  oSettings sAjaxSource  aData  function json               Clear the old information from the table            that oApi  fnClearTable  oSettings                Got the data - add it to the table            var aData     oSettings sAjaxDataProp                       that oApi  fnGetObjectDataFn  oSettings sAjaxDataProp    json     json           for   var i 0   i lt aData length   i                           that oApi  fnAddData  oSettings  aData i                        oSettings aiDisplay   oSettings aiDisplayMaster slice            that fnDraw             if   typeof bStandingRedraw     undefined   amp  amp  bStandingRedraw     true                         oSettings  iDisplayStart   iStart              that fnDraw  false                       that oApi  fnProcessingDisplay  oSettings  false                Callback user function - for event handlers etc            if   typeof fnCallback     function   amp  amp  fnCallback    null                         fnCallback  oSettings                     oSettings          Example call to load a new file    oTable fnReloadAjax   media examples support json source2 txt         Example call to reload from original file    oTable fnReloadAjax

User · Answer

You could use this function   function RefreshTable tableId  urlData                Retrieve the new data with   getJSON  You could use it ajax too         getJSON urlData  null  function  json                   table     tableId  dataTable            oSettings   table fnSettings             table fnClearTable this            for  var i 0  i lt json aaData length  i                        table oApi  fnAddData oSettings  json aaData i                       oSettings aiDisplay   oSettings aiDisplayMaster slice            table fnDraw                      Dont  forget to call it after your delete function has succeded   Source  http   www meadow se wordpress  p 536

User · Answer

You can use a simple approach        YourDataTableID   dataTable    fnAjaxUpdate      It will refresh the data by making an ajax request with the same parameters  Very simple

User · Answer

For the newer versions use   var datatable       table   dataTable   api       get  myUrl   function newDataArray        datatable clear        datatable rows add newDataArray       datatable draw          Taken from  https   stackoverflow com a 27781459 4059810

User · Answer

If anything works  Do this   example    lt div id  tabledisplay  gt  lt table class  display  id  table  gt  lt  table gt  lt table  lt  div gt    how to reload the table       tabledisplay   empty        tabledisplay   append   lt table class   display   id   table   gt  lt  table gt     initTable   tablename        initTable is just a method  that initialized the Table with getJSON

User · Answer

Simpler solution     var dt       table scroll   dataTable       getJSON url  null  function  json        dt fnClearTable        dt fnAddData json aaData       dt fnDraw

User · Answer

To reload the table data from Ajax data source  use the following function   dataTable ajax reload     Where dataTable is the variable used to create the table   var dataTable       your table id   DataTable        ajax   URL        See ajax reload   for more information

User · Answer

I m posting this just in case someone need it    Just create a button    lt button type  button  href  javascript void 0    onclick  mytable fnDraw     gt Refresh lt  button gt    but don t forget to add this when calling the datatable   mytable       mytable   dataTable

[jquery] How to reload the datatable(jquery) data?

Examples related to jquery

Examples related to datatables