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 ref

Answer 1

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
        ]

    } 
    );
}