I am using DataTables (jQuery plugin) to display my tabular data. If fetches data using AJAX from a JSON web service.

How do I force it to refresh using JavaScript/jQuery? I am looking through the API and cannot find the right function.

I am using DataTables (jQuery plugin) to display my tabular data. If fetches data using AJAX from a JSON web service.

How do I force it to refresh using JavaScript/jQuery? I am looking through the API and cannot find the right function.

• javascript
• jquery
• refresh
• datatables

3 Answers 3

While waiting for the answers, I finally found it: fnDraw function is what I needed.

It's described at the beginning of the API section, but I just didn't bother to read it all:

You must make the required calls to the server to manipulate your data as required, and then simply redraw the table (fnDraw) to view the new data.

Try calling:

$("#Table1").fnDestroy().dataTable();

That should rebuild it...

Add this somewhere:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) {
    if ( typeof sNewSource != 'undefined' && sNewSource != null )
    {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay( oSettings, true );
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams( oSettings, aData );

    oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */
        var aData =  (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

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

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
        {
            oSettings._iDisplayStart = iStart;
            that.fnDraw( false );
        }

        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */
        if ( typeof fnCallback == 'function' && fnCallback != null )
        {
            fnCallback( oSettings );
        }
    }, oSettings );
}

Then call it like this:

oTable = $(".dt").dataTable();
oTable.fnReloadAjax();

Credit: http://datatables/plug-ins/api