Display "Loading" in the table when calling fnReloadAjax

inakhostin

Hi,

I am having the same issue as mentioned in the following discussion.
http://datatables.net/forums/discussion/13563/display-loading...-in-table-when-using-fnreloadajax/p1

I am not using server side data reload and I have used both "true" and "false" as argument to _fnProcessingDisplay i still don't get the "loading..." message in the table.
What happens when I call rnReloadAjax is, the fnServerData.call functions goes to get data and when the callbacks gets called it updates the data in the table but you can't really tell meanwhile what is happening because the table is not saying "loading..." and if the data is huge the callback function takes a while to return with the new data so basically there is no indication to the user that something is happening!

I would really appreciate some help on how to get that the table to not show any data while the fnReloadAjax is trying to get the new data and only say "loading...."

following is my code for both the function and my table:

[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( sNewSource !== undefined && sNewSource !== null ) {
oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
this.fnDraw();
return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData.call( oSettings.oInstance, 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

inakhostin

well I did the following hack job:

added
[code]
this.dataTable().fnClearTable()
oSettings.iDraw = 0;
this.dataTable().fnDraw()
[/code]

before
[code]
oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {...}
[/code] in fnReloadAjax

so what this does is:
- clears the table off all the data meaning now ioSettings.aiDisplay.length = 0

- calls redraw with oSettings.iDraw = 0; which means:
- in jquery.dataTable.js [code]if (oSettings.aiDisplay.length !== 0) [/code] is skipped

- in jquery.dataTable.js[code]function _fnDraw(oSettings)[/code] gets called
since oSettings.oFeatures.bServerSide is false [code]oSettings.iDraw++;[/code] runs and sets iDraw to 1

- since iDraw is now 1 in jquery.dataTable.js [code]
if (oSettings.iDraw == 1 && oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide)
{
sZero = oLang.sLoadingRecords;
}
[/code] runs

which was exactly what I needed! but this looks like a horrible hack job!!! does anyone have a better way to solve this problem, i would really appreciate it.

here is the whole fnReloadAjax now:

[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( sNewSource !== undefined && sNewSource !== null ) {
oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
this.fnDraw();
return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

this.dataTable().fnClearTable()
oSettings.iDraw = 0;
this.dataTable().fnDraw()

oSettings.fnServerData.call( oSettings.oInstance, 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