DataTables 1.9.4 and sLoadingRecords with Ajax call( NO server side processing)
DataTables 1.9.4 and sLoadingRecords with Ajax call( NO server side processing)
_jthomas
Posts: 75Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
Are you able to link me to a page showing the error?
Thanks,
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]
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]
[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]
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
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
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]
[code]
oTable.fnFilter('');
oTable.fnSettings().iDraw = 0;
oTable.fnClearTable();
oTable.fnReloadAjax();
[/code]
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
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
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
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!
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
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!