DataTables 1.9.4 and sLoadingRecords with Ajax call( NO server side processing)

_jthomas

I think "sLoadingRecords" is getting overwritten because "oSettings.iDraw" variable is incremented with a possible bug condition. I am including the code from function _fnDraw( oSettings ) ( approx line#1386)

Approx line# 1426 has the code. I think the condition should read as [quote] else if (oSettings.oFeatures.bServerSide) [/quote]
[code]
else if ( !oSettings.oFeatures.bServerSide )
{
oSettings.iDraw++;
}
[/code]

Now in the same function approximate line#1500 we can see that oSettings.iDraw has to remain 1 for sLoadingRecords to display correctly. Allan, Would you agree? Thanks very much!
[code]
if ( oSettings.iDraw == 1 && oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide )
{

sZero = oLang.sLoadingRecords;

}
else if ( oLang.sEmptyTable && oSettings.fnRecordsTotal() === 0 )
{
sZero = oLang.sEmptyTable;

}
[/code]

allan

The loading display should only be shown when the internal draw counter is 1. Under what conditions should it show if iDraw is not 1?

Are you able to link me to a page showing the error?

Thanks,
Allan

_jthomas

Hi Allan,

Internal URL - so won't be accessible.

Here is the config. Also I am creating a JS Date inside the getUSDate function.

[code]
var oTable = $('#fileDetail').dataTable( {
"oLanguage": {
"sLoadingRecords": "Please wait - loading records...",
"sZeroRecords": "No records to display.",
"sProcessing": "Processing...",
"sInfoEmpty": "No entries to display."
},
"bJQueryUI": true,
"bLengthChange": false,
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
"sAjaxSource": "/getDetail",
"aaSorting": [[ 1, "asc" ]],
"aoColumnDefs":[
{ "sTitle": "Type", "sType":"string", "sClass":"center", "mData": "type", "aTargets": [0] },
{ "sTitle": "Record#", "sType":"numeric", "sClass":"right", "mData": "num", "aTargets": [1] },
{ "sTitle": "Source#", "sType":"numeric", "sClass":"right", "mData": "src", aTargets": [2] },
{ "sTitle": "Date 1", "sType":"date-us", "sClass":"center", "mData": "date1", "aTargets": [3],
"mRender": function ( data, type, full ) { return getUSDate(data); }},
{ "sTitle": "Date2", "sType":"date-us", "sClass":"center", "mData": "date2"aTargets": [4],
"mRender": function ( data, type, full ) { return getUSDate(data); }},
{ "sTitle": "Date3", "sType":"date-us", "sClass":"center", "mData": "date3", "aTargets": [5],
"mRender": function ( data, type, full ) { return getUSDate(data); }},
{ "sTitle": "Date4", "sType":"date-us", "sClass":"center", "mData": "date4", "aTargets": [6],
"mRender": function ( data, type, full ) { return getUSDate(data); } },
{ "sTitle": "RecID", "sType":"numeric","bVisible": false, "bSearchable": false, "aTargets": [ 7 ], "mData": "pk" }
],
"fnServerParams": function ( aoData ) {
aoData.push( { "name" : "fileID", "value" : "${fileID}" } );

},

"fnInitComplete": function(oSettings, json) {
console.log("fnInitComplete");
$("#fileDetail_filter input").focus();
//$('#fileDetail tbody tr:eq(0)').click();
}

} );

[/code]

_jthomas

Hi Allan,
I have added some log messages and captured it. Here are the details

[quote]
LOG: fnDraw 1 - iDraw: 1, No records returned by application.
LOG: fnDraw 2 - iDraw: 1, Please wait - loading records...
LOG: fnDraw 1 - iDraw: 2, No records returned by application.
LOG: fnDraw 3 - iDraw: 2, No records to display
LOG: fnDraw 1 - iDraw: 3, No records returned by application.
LOG: fnDraw 3 - iDraw: 3, No records to display
[/quote]

The code
[code]
console.log("fnDraw 1 - iDraw: " + oSettings.iDraw + ", " + sZero);
if ( oSettings.iDraw == 1 && oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide )
{
sZero = oLang.sLoadingRecords;
console.log("fnDraw 2 - iDraw: " + oSettings.iDraw + ", " + sZero);
}
else if ( oLang.sEmptyTable && oSettings.fnRecordsTotal() === 0 )
{
sZero = oLang.sEmptyTable;
console.log("fnDraw 3 - iDraw: " + oSettings.iDraw + ", " + sZero);
}
[/code]

_jthomas

Oh , I forgot to add the oLanguage ones

[quote]
"oLanguage": {
"sLoadingRecords": "Please wait - loading records...",
"sZeroRecords": "No records returned by application.",
"sProcessing": "Processing...",
"sInfoEmpty": "No entries to display.",
"sEmptyTable": "No records to display"
},
[/quote]

_jthomas

Hi Allan,
I found the cause and I am not sure why that is making datatables fnDraw called multiple times. I was using jQuery tabs in the same page. I have commented out that code and its working as expected.

Adding of jQuery UI tabs caused other issues like when mouse is moving over tabs, the column header names disappear and all. Anyway, any insights are highly appreciated :-) Thanks very much!

allan

Hi - just a quick note to say that I haven't forgotten about this! I'll investigate soon :-)

Allan

_jthomas

Hi Allan,
Thanks a lot. Also, I have narrowed it down to one function. I have eliminated jQuery UI components and the thing is occuring again for a simple page. I guess its the "fnReloadAjax" plugin. That is because my page works good first time. Whenever, I try to call fnReloadAjax function, the issue I mentioned started happening. Is it becuase of the "fnDraw" call inside that function? Thanks

_jthomas

Hi Allan,
Finally solved it and waiting for your stamp of approval. I am resetting iDraw = 0 before calling "fnReloadAjax" plugin and all seems to be working. The code is shown below.

[code]
oTable.fnFilter('');
oTable.fnSettings().iDraw = 0;
oTable.fnClearTable();
oTable.fnSettings().iDraw = 0;
oTable.fnReloadAjax();
[/code]

_jthomas

Nah, I would like to take it back. When the server returns no records then it still displays the same "Please Loading..." :-). Let me look at it again.

_jthomas

Okay my bad - one extra reset. Hope this is the final one

[code]
oTable.fnFilter('');
oTable.fnSettings().iDraw = 0;
oTable.fnClearTable();
oTable.fnReloadAjax();

[/code]

allan

Okay - this is very much not a good thing to do: `oTable.fnSettings().iDraw = 0;` ! The options in the settings object should never be changed externally. If there isn't an API for them, then they should be changed. That will reset the draw counter, seriously upsetting a number of different parts of DataTables and its extras.

Perhaps I missed it before, but is this issue only when you call fnReloadAjax ? At the moment, there is no method of the ajax reload to show a 'loading' message - the 'processing' message is probably the closest.

Allan

_jthomas

Yes, this occurs only in the scenario of fnReloadAjax. Thanks!

The reason I made the change is because, fnReloadAjax, I guess basically is kind of getting data from the server like its a first time call. Hence, I made the change. I will revert it. Thanks

allan

Ah! Good okay. Thanks for clarifying that - I was very worried that something fundamental was broken in DataTables!

The way fnReloadAjax should be working is that it will not clear the table until it gets the new data, but it should be showing the processing element, so you could easily make that say "loading".

Allan

_jthomas

Yes Allan - that is correct. I guess it might be more user friendly if we clear the table before the call. What was happening now is that, we make the call with no feedback and suddenly the new data appears.

Hence, I cleared the filter and table and did a sacrilege :-) before making the call. Thanks!

On a separate note - would you be making the change to KeyTable plugin to work with dynamic data like the one loaded through Ajax. That would be so awesome. Keep up the great work!

allan

That's what the processing disable is there for - to show the user that something is happening.

KeyTable - yes! KeyTable is in serious need of a v2 upgrade. I'm hoping to do that while DT 1.10 is in beta, but its time dependent!

Allan

_jthomas

However, "processing" thing is giving users an inconsistent message at a different location hovering above the table.

When we come to the page, first time, "sLoadingRecords" message appears within the table. I was trying to show the same message at the same place for each subsequent fnReloadAjax calls for consistency. Thanks!