Custom message in sInfo using Scroller

matthewj

I am trying to put a custom message in sInfo as below: <span class="lvllbl"></span>
"sInfo": 'There are a total of TOTAL <span class="lvllbl"></span>(s).',

But the Scroller doesn't seem to put the message. If we remove the Scroller it would work just fine and the message is displayed.
I am using Datatable 1.9.4 and Scroller 1.1.0. But this even doesn't work on the latest version.

Here is the code:

$(document).ready(function() {
                var lvllbl;
                var table = $('#hierlvl2list').dataTable( {
                    "sDom": '<"H"Tf<"clear">><"top"i>t<"F">rS',
                    "bJQueryUI": true,
                    "bServerSide": true,
                    "sScrollX": "100%",
                    "sScrollY": "400px",
                    "bScrollCollapse": true,
                    "bAutoWidth": false,
                    "bProcessing": true,
                    "bDeferRender": true,
                    "sAjaxSource": "${pageContext.request.contextPath}/admin/hierarchy/hier_lvl2_list.html?action=listlvlitems&orgid=${param.orgid}",
                    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                        oSettings.jqXHR = $.ajax( {
                            "url": sSource,
                            "data": aoData,
                            "type": "POST",
                            "dataType": 'json',
                            "success": function(data) {
                                var hasError = fnCheckError(data);
                                if(!hasError) {
                                    lvllbl = data.lvllbl;
                                    fnCallback(data);
                                }
                            }
                        });
                    },
                    "aoColumns": [
                        { "sTitle":"Level Title", "mData": "lvlTitle", "sClass": 'col_header' }
                    ],
                    "oLanguage": {
                        "sInfo": 'There are a total of _TOTAL_ <span class="lvllbl"></span>(s).',
                        "sInfoEmpty": 'There are a total of _TOTAL_ <span class="lvllbl"></span>(s).',
                        "sEmptyTable": 'There are no <span class="lvllbl"></span>(s) to display',
                        "sZeroRecords": 'There are no matching <span class="lvllbl"></span>(s) to display',
                        "sProcessing": 'Please wait - loading <span class="lvllbl"></span> (s) ...'
                    },
                    "fnDrawCallback": function(oSettings) {
                        if(lvllbl) {
                            $('span.lvllbl').html(lvllbl);
                        }
                    },
                    "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
                        nHead.getElementsByTagName('th')[0].innerHTML = '<div class="DataTables_sort_wrapper">'+lvllbl+'<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>';
                    },

matthewj

I put a console in

"fnDrawCallback": function(oSettings) {
    console.log("fnDrawCallback:"+lvllbl)
    if(lvllbl) {
        $('span.lvllbl').html(lvllbl);
    }
}

and also in "_fnInfo": function () of dataTables.scroller.js

else if ( dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
        {
            console.log("-->"+dt.oLanguage.sInfo);
            /* Normal record set */
            sOut = dt.oLanguage.sInfo.
                    replace('_START_', sStart).
                    replace('_END_',   sEnd).
                    replace('_TOTAL_', sTotal)+
                dt.oLanguage.sInfoPostFix;
            console.log("sOut:"+sOut);
        }

It seems that fnDrawCallBack is called ahead of the function in scroller and hence I am not getting the value of lvllbl appended in sInfo.

matthewj

It seems that Scroller do not fire fnInfoCallBack function.
I removed sInfo from oLanguage and added fnInfoCallBack function to pass custom info header but the Scroller did not take that instead it took the default message: Showing 1 to 10 of 10 entries

my fnInfoCallBack function is below:

"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
    console.log("fnInfoCallback:"+lvllbl);
    return 'There are a total of '+iTotal+' <span class="lvllbl">'+lvllbl+'</span>(s).';
},

Interestingly if I remove the Scroller [By removing 'S' from sDom] the dataTable displays the info message from fnInfoCallback : There are a total of 10 Region(s).

Hence this is very well evident that Scroller doesn't fire the fnInfoCallback. Is it an issue or bug or just that Scroller doesn't support it??

Help!!!!

matthewj

I commented out lines 908 to 913 in _fnInfo function in dataTables.scroller.js 1.2.1 and then it takes the custom message from fnInfoCallback function

else if ( dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
{
    /* Normal record set */
    /*
    sOut = dt.oLanguage.sInfo.
            replace('_START_', sStart).
            replace('_END_',   sEnd).
            replace('_TOTAL_', sTotal)+
        dt.oLanguage.sInfoPostFix;
    */
}

Therefore fnInfoCallback surely is fired but it seems Scroller is overriding it. I did few more traces and seems that below order is followed:
fnInfoCallback
fnDrawCallback
fnInitComplete
_fnInfo function in dataTables.scroller.js

Isn't this a bug in Scroller? I would think that at least fnInitComplete or fnDrawCallback should be the last function to be called.

I can comment out the code in dataTables.scroller.js but I am not sure of its side effects and therefore I do not want it to be done in this way.

I just want my custom message with dynamic text to be printed on Info bar.

Help!!!

matthewj

I think these lines[893 - 925] in dataTables.scroller.js is redundant. I removed these and I can see the text in fnInfoCallback. Please let me know if my finding is correct.

if ( dt.fnRecordsDisplay() === 0 &&
               dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
{
    /* Empty record set */
    sOut = dt.oLanguage.sInfoEmpty+ dt.oLanguage.sInfoPostFix;
}
else if ( dt.fnRecordsDisplay() === 0 )
{
    /* Rmpty record set after filtering */
    sOut = dt.oLanguage.sInfoEmpty +' '+
        dt.oLanguage.sInfoFiltered.replace('_MAX_', sMax)+
            dt.oLanguage.sInfoPostFix;
}
else if ( dt.fnRecordsDisplay() == dt.fnRecordsTotal() )
{
    /* Normal record set 
    sOut = dt.oLanguage.sInfo.
            replace('_START_', sStart).
            replace('_END_',   sEnd).
            replace('_TOTAL_', sTotal)+
        dt.oLanguage.sInfoPostFix;*/
}
else
{
    /* Record set after filtering */
    sOut = dt.oLanguage.sInfo.
            replace('_START_', sStart).
            replace('_END_',   sEnd).
            replace('_TOTAL_', sTotal) +' '+
        dt.oLanguage.sInfoFiltered.replace('_MAX_',
            dt.fnFormatNumber(dt.fnRecordsTotal()))+
        dt.oLanguage.sInfoPostFix;
}

allan

Hi,

Yes - this looks very much like a bug in Scroller. There should also be support for _PAGE_ and _PAGES_ added (although that is probably less useful in Scroller.

Thanks for flagging this up - I'll take a look and try to fix for the release I want to do on Monday.

Allan

matthewj

Thanks Allan. I very much appreciate it.

matthewj

Hi Allan,

I found one more trouble with language elements. My datatable uses scroller - I am still using the example started in this thread. This time the problem is when I put the language elements in text file it just removes all the buttons rendered by Table tools [New, Edit and several other buttons just vanishes but the language strings are correctly displayed.

"oLanguage": { 
    "sUrl": "../dtlang.txt"
},

and below is the content of text file

{
    "sInfo": "Total _TOTAL_ record(s) found",
    "sInfoEmpty": "No matching record(s) found",
    "sEmptyTable": "No record(s) found",
    "sZeroRecords": "No matching record(s) found",
    "infoFiltered": "(filtered from _MAX_)",
    "sProcessing": "Please wait - loading record(s) ..."
}

I am still doubtful that this behaviour could have caused by Scroller.

matthewj

I tried after removing Scroller by removing the 'S' from sDom but it still failed to show my TableTool buttons. Therefore is it caused by TableTool?.

I then tried removing the "oLanguage" and all my buttons appeared and this time it shows datatable default languange strings.

Please note I am using datatables 1.9.4

matthewj

Hi Allan, if this is not related should I create a separate thread for this issue?

allan

A separate thread for each issue would be good so I can track each individually. For Scroller and TableTools did your sDom option include both S and T? Can you link to a test case in the new tread please.

I should also point out that 1.9 is no longer supported. If there are any fixes to be made in DataTables they will be in 1.10.

Allan

allan

Fix committed. The correct way of updating the info string is with the infoCallback option (fnInfoCallback in 1.9-). The draw callback won't work, as a scroll does not necessarily trigger a draw.

I'm just about to tag and release an updated version of Scroller. This fix will be included in it.

Allan

matthewj

Thanks Allan for the fix. Should I take the fix from the Nightly build v1.2.2-dev?

matthewj

Regarding the second issue I have started a discussion: http://datatables.net/forums/discussion/22297/table-tool-buttons-not-rendered-when-using-text-file-for-passing-language-info-to-dt

I think this is not related to Scroller, if I don't include both S and T, it still not rendered. Thiis happens only when we use table tool api.

allan

1.2.2 has been released now, so you can take it from there.

I've just added a reply to your other thread.

Allan