Repopulating a Datatable with new parameters

Question

I initialised my table like this

/* POST data to server */
$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "xhr.php",
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.ajax( {
                "dataType": 'json', 
                "type": "POST", 
                "url": sSource, 
                "data": aoData, 
                "success": fnCallback
            } );
        }
    } );
} );

Later on, I want to update the data in the table. How do I do that?

Answer 1

I had the exact same problem, and ended up solving it like this:

function GetDatatable(parameter) {
    $('#example').dataTable().fnDestroy();
    $('#example').dataTable({
...

Then you can add your new parameters in aoData after that. It's an ugly hack, but it works.

Answer 2

I've had this struggle with datatables also.

My solution:

var data = [json loaded with ajax]

function loadTable(data){

    if($.fn.DataTable.isDataTable('#testsListTable')){

        if(data.testRunReports.length == 0)
            $('#testsListTable').dataTable().fnClearTable();
        else
            $('#testsListTable').dataTable().fnAddData(data);

        return;
    }

    $('#testsListTable').DataTable({
         data: data,

...

little more code but this does not have to initialize the table again.