Redraw datatables after using ajax to refresh the table content

Question

I am using Datatables and have a button on the page that refreshes the table using AJAX  To be clear the table isn t using an ajax source of data  we are just using ajax to refresh it only when needed  Ajax is refreshing the div which the table is wrapped in  I know i m losing my pagination buttons and filtering capability because the table needs to be redrawn but i m not sure how to add this into the table initialization code   Datatables code  var oTable6    document  ready function         oTable6       rankings   dataTable             sDom   t lt  bottom filp gt  lt  clear  gt             bAutoWidth   false           sPaginationType    full numbers            aoColumns                     bSortable   false   sWidth    10px                 null              null              null              null              null              null              null              null              null              null              null                          The ajax code is this      ajaxchange   click function        var campaign id       campaigns id   val        var fromDate       from   val        var toDate       to   val         var url    http   domain com account campaign ajaxrefreshgrid format html         post url    campaignId  campaign id  fromdate  fromDate  todate  toDate           function  data                      ajaxresponse   html data                     I tried this but it didn t work   fnDrawCallback   function         function  data                  ajaxresponse   html data

User · Accepted Answer

It looks as if you could use the API functions to

clear the table ( fnClearTable )
add new data to the table ( fnAddData)
redraw the table ( fnDraw )

http://datatables.net/api

UPDATE

I guess you're using the DOM Data Source (for server-side processing) to generate your table. I didn't really get that at first, so my previous answer won't work for that.

To get it to work without rewriting your server side code:

What you'll need to do is totally remove the old table (in the dom) and replace it with the ajax result content, then reinitialize the datatable:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}

User · Answer

Use this   var table     selector  dataTables    table api   draw false     or  var table     selector  DataTables    table draw false

User · Answer

This works for me  var dataTable       HelpdeskOverview   dataTable     var oSettings   dataTable fnSettings    dataTable fnClearTable this   for  var i 0  i lt json aaData length  i         dataTable oApi  fnAddData oSettings  json aaData i      oSettings aiDisplay   oSettings aiDisplayMaster slice    dataTable fnDraw

User · Answer

This is how I feed my table with data retrieved by ajax  not sure if this is the best practice tough  but it feels intuitive and works well       initialise table    oTable1        tables table    dataTable          sPaginationType    full numbers        bLengthChange   false       aaData            aoColumns      sTitle    Tables          bAutoWidth   true           retrieve data   function getArr  conf csv path           ajax                url     my url          success    function  obj                          update table  obj                             build table data    function update table  arr                 oTable1 fnClearTable        for   input in arr                 oTable1 fnAddData    arr input

User · Answer

check fnAddData  https   legacy datatables net ref   document  ready function        var table       example   dataTable      var url     RESTApplicationTest webresources entity person       get url  function  data        for  var i   0  i  lt  data length  i            table fnAddData  data i  idPerson  data i  firstname  data i  lastname  data i  email  data i  phone

User · Answer

In the initialization use    fnServerData   function   sSource  aoData  fnCallback                             Add some extra data to the sender                       newData   aoData                      newData push    name    key    value       value   val                              getJSON  sSource  newData  function  json                                Do whatever additional processing you want on the callback  then tell DataTables                           fnCallback json                                                 And then just use       table id   dataTable   fnDraw      The important thing in the fnServerData is       newData   aoData      newData push    name    key    value       value   val         if you push directly to aoData  the change is permanent the first time you draw the table and fnDraw don t work the way you want

User · Answer

Try destroying the datatable with bDestroy true like this       ajaxchange   click function        var campaign id       campaigns id   val        var fromDate       from   val        var toDate       to   val         var url    http   domain com account campaign ajaxrefreshgrid format html         post url    campaignId  campaign id  fromdate  fromDate  todate  toDate               function  data                           ajaxresponse   html data                    oTable6       rankings   dataTable    bDestroy  true                       sDom   t lt  bottom filp gt  lt  clear  gt                         bAutoWidth   false                       sPaginationType    full numbers    aoColumns                 bSortable   false   sWidth    10px             null          null          null          null          null          null          null          null          null          null          null                                         bDestroy  true will first destroy and datatable instance associated with that selector before reinitializing a new one

User · Answer

For users of modern DataTables  1 10 and above   all the answers and examples on this page are for the old api  not the new  I had a very hard time finding a newer example but finally did find this DT forum post  TL DR for most folks  which led me to this concise example    The example code worked for me after I finally noticed the     selector syntax immediately surrounding the html string  You have to add a node not a string   That example really is worth looking at but  in the spirit of SO  if you just want to see a snippet of code that works    var table       example   DataTable      table rows add                 lt tr gt                  lt td gt Tiger Nixon lt  td gt                  lt td gt System Architect lt  td gt                  lt td gt Edinburgh lt  td gt                  lt td gt 61 lt  td gt                  lt td gt 2011 04 25 lt  td gt                  lt td gt  3 120 lt  td gt                lt  tr gt         draw      The careful reader might note that  since we are adding only one row of data  that table row add      should work as well and did for me

User · Answer

I m not sure why   But  oTable6 fnDraw      Works for me   I put it in the next line

[jquery] Redraw datatables after using ajax to refresh the table content?

Examples related to jquery

Examples related to ajax

Examples related to datatables