scrollX show header twice when getting data through server side (bServerSide='true')

Parimal

Hi

i have following code on success of server side data but its end up with two header and i cannot do sorting on any of header.

success: function (json) {
oIndividualCache.lastJson = jQuery.extend(true, {}, json);

                    if (oIndividualCache.iCacheLower != oIndividualCache.iDisplayStart) {
                        json.aaData.splice(0, oIndividualCache.iDisplayStart - oIndividualCache.iCacheLower);
                    }
                    json.aaData.splice(oIndividualCache.iDisplayLength, json.aaData.length);
                    fnCallback(json);
}

allan

Please link to a test case showing the issue.

Allan

Parimal

I don't know how to link to test case as datatable getting data from server.
Find my dataTable configuration which might help.

        <table id="dtSearchResult" class="datatable">
        <thead>
            <tr>
                <th>ID
                </th>
                <th>Name
                </th>
                <th>Age Group
                </th>
                <th>Specialisation
                </th>
                <th>test 1
                </th>
                <th>test 2
                </th>
                <th>test 3
                </th>
                <th>test 4
                </th>
                <th>test 5
                </th>
                <th>test 6
                </th>
                <th>test 7
                </th>
                <th>test 8
                </th>
                <th>test 9
                </th>
                <th>test 10
                </th>
                <th>test 11
                </th>
                <th>test 12
                </th>
                <th>test 13
                </th>
                <th>test 14
                </th>
                <th>test 15
                </th>
                <th>test 16
                </th>
                <th>test 17
                </th>
                <th>test 18
                </th>
            </tr>
        </thead>
    <tbody>
    </tbody>
</table>

//DataTable Creation
var oSearch = $('#dtSearchResult').dataTable({
"bStateSave": false,
"bPaginate": true,
"bJQueryUI": true,
"iDisplayLength": 10,
"iDisplayStart": 0,
"bAutoWidth": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"scrollX": true,
"order": [[0, "desc"]],
"sAjaxSource": "/api/SearchProcess",
"fnServerData": fnIndividualDataTablesPipeline,
"sDom": '<"H"fr>t<"F"ip>', // to remove page length
"oLanguage": {
"sSearch": "Filter: ",
"sInfo": "Showing START to END of TOTAL entries",
"sEmptyTable": "No records found"
}
});

//Java script call to get data from server

var oIndividualCache = { iCacheLower: -1 }; function fnSetKey(aoData, sKey, mValue) { for (var i = 0, iLen = aoData.length; i < iLen; i++) { if (aoData[i].name == sKey) { aoData[i].value = mValue; } } } function fnGetKey(aoData, sKey) { for (var i = 0, iLen = aoData.length; i < iLen; i++) { if (aoData[i].name == sKey) { return aoData[i].value; } } return null; } function fnIndividualDataTablesPipeline(sSource, aoData, fnCallback) { var iPipe = 5; /* Ajust the pipe size */ var bNeedServer = false; var sEcho = fnGetKey(aoData, "sEcho"); var iRequestStart = fnGetKey(aoData, "iDisplayStart"); var isFirstRequest = iRequestStart == 0; //Variable has been declared due to control doesn't work in Global Search, means it's dirty hack var iRequestLength = fnGetKey(aoData, "iDisplayLength"); var iRequestEnd = iRequestStart + iRequestLength; oIndividualCache.iDisplayStart = iRequestStart; /* outside pipeline? */ if (oIndividualCache.iCacheLower < 0 || iRequestStart < oIndividualCache.iCacheLower || iRequestEnd > oIndividualCache.iCacheUpper) { bNeedServer = true; } /* sorting etc changed? */ if (oIndividualCache.lastRequest && !bNeedServer) { for (var i = 0, iLen = aoData.length; i < iLen; i++) { if (aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho") { if (aoData[i].value != oIndividualCache.lastRequest[i].value) { bNeedServer = true; break; } } } } /* Store the request for checking next time around */ oIndividualCache.lastRequest = aoData.slice(); if (bNeedServer) { if (iRequestStart < oIndividualCache.iCacheLower) { iRequestStart = iRequestStart - (iRequestLength * (iPipe - 1)); if (iRequestStart < 0) { iRequestStart = 0; } } oIndividualCache.iCacheLower = iRequestStart; oIndividualCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe); oIndividualCache.iDisplayLength = fnGetKey(aoData, "iDisplayLength"); fnSetKey(aoData, "iDisplayStart", iRequestStart); fnSetKey(aoData, "iDisplayLength", iRequestLength * iPipe); //form serialize var formfilter = aoData.slice(aoData.length - 1); formfilter.name = "sFilter"; var searchstr = ''; for (var i = 0; i < aoData.length; i++) { searchstr += "&SearchParamList." + aoData[i].name + "=" + aoData[i].value; } aoData = $("[id='sFilter']").val() + searchstr; $.ajax({ type: 'POST', dataType: 'json', url: sSource, data: aoData, beforeSend: function () { }, complete: function (data) { }, success: function (json) { oIndividualCache.lastJson = jQuery.extend(true, {}, json); if (oIndividualCache.iCacheLower != oIndividualCache.iDisplayStart) { json.aaData.splice(0, oIndividualCache.iDisplayStart - oIndividualCache.iCacheLower); } json.aaData.splice(oIndividualCache.iDisplayLength, json.aaData.length); fnCallback(json); }, error: function (jqXHR, textStatus, errorThrown) { } }); } else { json = jQuery.extend(true, {}, oIndividualCache.lastJson); json.sEcho = sEcho; /* Update the echo for each response */ json.aaData.splice(0, iRequestStart - oIndividualCache.iCacheLower); json.aaData.splice(iRequestLength, json.aaData.length); fnCallback(json); return; } }

Parimal

Server data:{"$id":"1","sEcho":"1","iDisplayStart":0,"iTotalRecords":38745,"iTotalDisplayRecords":38745,"aaData":[["1213456","Mrs xyz","31 - 40 Years Old","UNKNOWN","MEM","",null,null,"","","s.Customer.Claims_Related","s.Customer.Claims_Related","s.Customer.Hospital_Network","s.Customer.Corporate_Entity","col data_University","col data_Final_Year","col data","col data","col data","col data","col data","col data"]],"bxStatus":"Ok"}

Parimal

Hi Allan

I have found that its doesn't work with jquery-ui.min.js.
So can you add your jquery-ui.min.js in your example and try again? I have feeling that having some conflict with ui library.

allan

DataTables works just fine with jQuery UI as you can see in this Editor example: https://editor.datatables.net/examples/simple/dates.html .

Are you loading jQuery twice perhaps?

Failing that, as I say, I would need a link to a test case (use http://live.datatables.net , JSFiddle or CodePen if you can't link to the page on your server).

Allan