Redraw datatables after using ajax to refresh the table content?

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

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.

I'm not sure why. But

oTable6.fnDraw();

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