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_jthomas Posts: 75Questions: 0Answers: 0
edited August 2013 in Bug reports
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]

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    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_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    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!
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi - just a quick note to say that I haven't forgotten about this! I'll investigate soon :-)

    Allan
  • _jthomas_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    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_jthomas Posts: 75Questions: 0Answers: 0
    Okay my bad - one extra reset. Hope this is the final one

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

    [/code]
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    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_jthomas Posts: 75Questions: 0Answers: 0
    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
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    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_jthomas Posts: 75Questions: 0Answers: 0
    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!
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    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_jthomas Posts: 75Questions: 0Answers: 0
    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!
This discussion has been closed.