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<"bottom"filp><"clear">',
        "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);
    };
},

Could you post your full datatables code as well as the html related to it? — Keith.Abramo
– Keith.Abramo, Commented Oct 25, 2011 at 14:18
I've updated the code above to show the entire initialization for the table — Anagio
– Anagio, Commented Oct 25, 2011 at 15:16
@agunn why don't you link to the chosen answer on that question rather than your own ? The chosen answer at that question is stackoverflow.com/a/7890909/804087 — Anagio
– Anagio, Commented Nov 12, 2016 at 23:59
NB: For users of the modern datatables api (v1.10 and above), I've posted an answer below (stackoverflow.com/a/40554137/165164) that uses that variation. AFAICS, all of the answers to this question so far use the v1.9 and prior api syntax. — Anne Gunn
– Anne Gunn, Commented Nov 14, 2016 at 15:48
@anagio, I linked to my answer below because I believe it is useful to have a pointer here to a newer answer that refers to the newer DT api. I did not refer to any other SO post question/answer because I had not found one that used modern DT 1.10 api syntax. I appreciate your right to question whether or not I made the correct choice but it appears to me that you actually deleted my comment. Am I confused? I don't think deleting my comment, rather than responding to it, is in the spirit of SO. — Anne Gunn
– Anne Gunn, Commented Nov 14, 2016 at 15:57

swatkins · Accepted Answer · 2011-10-25 18:13:38Z

27

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
        ]

    } 
    );
}

edited Oct 25, 2011 at 18:13

answered Oct 25, 2011 at 14:32

swatkins

13.6k4 gold badges50 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anagio Over a year ago

I've been trying to work with all three of these with no luck. I can call clearTable before the ajax function i see the old data clear. I then have fnDraw after the ajax function and it's not redrawing the table. The ajax response includes other html not just the <table> so i'm sure I need to redraw the #rankings table specifically

swatkins Over a year ago

It looks to me as if the fnAddData function takes an array of data, not HTML

Anagio Over a year ago

Well is there anyway to refresh my table without recoding the ajax to get an array?

Keith.Abramo · Accepted Answer · 2011-10-25 18:30:31Z

13

+50

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<"bottom"filp><"clear">',
                    "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.

answered Oct 25, 2011 at 18:30

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

2 Comments

newbie Over a year ago

Sorry for a noob question but how did you fill the new data in the table? Is this $("#ajaxresponse").html(data); it?

caglaror Over a year ago

That works for me. I get my spagetti content into table with ajax. And i add "bDestroy":true, into parameters. After that initialize datatable every ajax content loaded. thnx @Keith.Abramo

jairobg · Accepted Answer · 2013-03-04 15:47:20Z

7

I'm not sure why. But

oTable6.fnDraw();

Works for me. I put it in the next line.

answered Mar 4, 2013 at 15:47

jairobg

912 silver badges5 bronze badges

1 Comment

Afshin Mehrabani Over a year ago

because oTable6 is initiated using $(element).dataTables() not DataTables class.

Avram Cosmin · Accepted Answer · 2014-12-20 02:55:19Z

6

Use this:

var table = $(selector).dataTables();
table.api().draw(false);

or

var table = $(selector).DataTables();
table.draw(false);

answered Dec 20, 2014 at 2:55

Avram Cosmin

3737 silver badges8 bronze badges

Comments

Anne Gunn · Accepted Answer · 2016-11-11 18:47:41Z

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( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).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.

Imran Rashid · Accepted Answer · 2013-03-14 13:37:00Z

1

This works for me

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();

answered Mar 14, 2013 at 13:37

Imran Rashid

3,5124 gold badges33 silver badges42 bronze badges

Comments

laromicas · Accepted Answer · 2013-08-05 20:26:26Z

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.

Igor L. · Accepted Answer · 2014-03-17 14:59:31Z

0

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] );
    }                                
}

edited Mar 17, 2014 at 14:59

answered Mar 17, 2014 at 11:45

Igor L.

3,5157 gold badges45 silver badges69 bronze badges

Comments

Juan Manuel Garcia Carmona · Accepted Answer · 2020-10-21 11:48:21Z

0

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 < data.length; i++) {
      table.fnAddData([data[i].idPerson, data[i].firstname, data[i].lastname, data[i].email, data[i].phone])
    }
  });
});

answered Oct 21, 2020 at 11:48

Juan Manuel Garcia Carmona

90210 silver badges9 bronze badges

Collectives™ on Stack Overflow

Redraw datatables after using ajax to refresh the table content?

9 Answers 9

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related