Data missing to load on scroller async ajax call

vijendraxm

Hi,
On first load of datatable ajax call data set and when 'mainloader' get hide then I'm scrolling till bottom of table which sends multiple ajax call in parallel but one of ajax call which taking more time to get success, not loading it's data in table.

How can I resolve this data missing issue? Please help.

My datatable configuration is:

dataTableObj = $jq(itemTableElem).DataTable({

    bLengthChange: false,
    searching : false,
    ordering : false,
    scrollCollapse: true,
    language: {

        search: "_INPUT_",
        searchPlaceholder: "Search",
        sLengthMenu: "_MENU_",
        infoFiltered : "",
        info:"",
        //zeroRecords : "Loading. Please wait...",
        // processing: "Loading. Please wait...",
        //processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> ',
    },
    serverSide : true,
    ajax: {
        url : 'corporationIndex.html?lookAndFeel=corporation',
        type : 'POST',
        dataSrc : function (json) {
            for (i=0; i<=json.thisLocations.length-1; i++) {
                mainLocData.push(json.thisLocations[i]);
            };
            mainLocData.sort(function(a, b){
                var locNameA = a.name.toLowerCase(), 
                    locNameB = b.name.toLowerCase();
                if ((locNameA.match(/^[0-9]*$/)) && (locNameB.match(/^[0-9]*$/))) {
                    return parseInt(locNameA) - parseInt(locNameB);
                } else {
                    if (locNameA < locNameB) { //sort string ascending
                        return -1;
                    }
                    if (locNameA > locNameB) {
                        return 1;
                    }
                    return 0; //default return value (no sorting)
                }
            });
            return mainLocData;
        },
    },
    initComplete: function( settings, json ) {
        if (json.recordsFiltered == 0) {
            var a = (totalLocationLength * 48) +'px';
            $jq('.dataTables_scrollBody').css({"height":a});
        };
        setTimeout(function(){
            document.getElementById('mainloader').style.display = 'none';
        },1000);
    },
    dom: "rtS",
    draw: 1,
    recordsTotal: totalLocationLength,
    recordsFiltered: totalLocationLength, 
    scrollY: '400px',
    deferRender: true,
    scrollCollapse: true,
    scrollX: true,
    scroller: {
        loadingIndicator: true,
        trace: true,
        serverWait: 0,
        loaderVisible: true,
        rowHeight: 48,
        boundaryScale: 0.75,
        displayBuffer: 2.5
    },

    fixedColumns: true,
    columnDefs: dataTableColumnsDefinition,

colin

Hi @vijendraxm ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin