Home > Web > Refreshing data in jQuery DataTables

Refreshing data in jQuery DataTables

Allan Jardine’s DataTables is a very powerful and slick jQuery plugin for displaying tabular data. It has many features and can do most of what you might want. One thing that’s curiously difficult though, is how to refresh the contents in a simple way, so I for my own reference, and possibly for the benefit of others as well, here’s a complete example of one way if doing this:

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody> 
  </tbody> 
</table>
function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    
    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');
 
  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

The key is of course the RefreshTable function.

/Emil

Categories: Web Tags: , ,
  1. Henrik Ebbeskog
    February 24th, 2011 at 10:15 | #1

    Agree! Curiously difficult is the word!

    To refresh a jqGrid table is a “one-liner”:

    $(tableId).jqGrid(‘setGridParam’, { url: urlData}).trigger(“reloadGrid”);

    I personally like jqGrid better. It is more powerful and feature-rich. And I have heard it has better performance (but that I don’t know). On the other hand DataTables is simpler to learn – but not for this apparently :-)

    http://www.trirand.com/blog/
    Demos at
    http://www.trirand.com/blog/jqgrid/jqgrid.html

  2. Eugene.Brian.Ong
    October 2nd, 2011 at 04:44 | #2

    There is also fnReloadAjax() which is very similar to your code. See http://www.datatables.net/plug-ins/api

  3. October 2nd, 2011 at 20:11 | #3

    Yes, but for some reason that did not work for me. When googling I found several others having the same problem and that’s why I wrote this post. Apparently it’s some combination of configuration options that causes the problems…

    Thanks for the comment though, it may very well work for others having similar problems.

  4. heptagone
    January 22nd, 2013 at 23:41 | #4

    OMG i was breaking my head on a wall for 2 days, copy pasted your code and modified the table name along with the ajax source and it worked right out of the box on my rails 3 app

  5. January 25th, 2013 at 21:52 | #5

    @heptagone , glad I could help. Hope your head is okay :-)

  6. Siva
    February 12th, 2013 at 21:32 | #6

    Your post solved my problem. Thanks a lot for posting such a awesome function.

  7. February 19th, 2013 at 10:18 | #7

    @Siva, that’s great to hear.

  8. Madhu
    April 25th, 2013 at 20:30 | #8

    Thanks for sharing RefreshTable code.

  9. April 25th, 2013 at 22:39 | #9

    You’re welcome, @Madhu :-)

  10. Leo
    May 4th, 2013 at 09:14 | #10

    Hej Emil,

    Your implementation looks great but how can I send custom data to the server along with the refresh request?

    I mean, something like this for example:
    “fnServerParams”: function ( aoData ) {
    aoData.push({“name” : “id”, “value” : ${param.id}});}

    Thanks.

  11. May 6th, 2013 at 20:56 | #11

    Sorry Leo, can’t help you there. I’m not sure that’s possible with my solution.

  12. May 23rd, 2013 at 15:18 | #12

    Firstly Thank you for writing this function,

    I am writing a CGI file to load datatable , But when I am calling AutoReload() on mouse click to refresh the table, nothing happening. Am I doing something wrong?

    Thanks

  13. May 23rd, 2013 at 21:29 | #13

    Hi @Shahid ,

    I’m afraid it’s very difficult to know what your problem is, all I know is that the above code works for me. I can only assume that you have copied something wrong or missed to replace an id or something like that. Have you had a look at your browser’s script console? Any errors that occur should be displayed there.

    /Emil

  14. May 24th, 2013 at 18:54 | #14

    Thanks Emil for your reply,

    I tried debugging code and couldn’t solve it. ended up using their API to reload Ajax source. I am good not. thanks for your help though.

  15. Rick
    August 10th, 2013 at 01:47 | #15

    @Henrik Ebbeskog

    After few days working with DataTables this code is very easy to follow and straightforward. Work perfect to my needs BTW!

  16. Kian
    August 16th, 2013 at 06:39 | #16

    @Leo

    this send parameters to server using post and shows progress

    oSettings = table.fnSettings();

    $(‘.dataTables_processing’).css(‘visibility’,’visible’).show();

    $.post(oSettings.sAjaxSource, {state:0}, function( json ){
    table.fnClearTable(this);
    for (var i=0; i<json.aaData.length; i++){
    table.oApi._fnAddData(oSettings, json.aaData[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    },'json')
    .always(function(){$('.dataTables_processing').hide();});

  17. August 24th, 2013 at 20:58 | #17

    Thank you for sharing this. Appreciated!

  18. September 12th, 2013 at 16:40 | #18

    The url for my data comes from an ajaxSearch.action call. Has anyone been able to get this code to work when using that call?

  19. Herber
    April 23rd, 2014 at 21:27 | #19

    Mad props to you Emil, you really helped me out.
    I’d like to add just the following:
    If you’re using jQuery instead of $ just add jQuery.noConflict() at the beggining of your javascript code; then replace $ by jQuery, as it is shown below:

    function RefreshTable(tableId, urlData)
    {
    jQuery.getJSON(urlData, null, function( json )
    {
    table = jQuery(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
    table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    });
    }

  20. Luciano
    September 23rd, 2014 at 18:53 | #20

    You saved my life! I love you

  1. December 10th, 2014 at 14:07 | #1

Web Analytics