scrollX show header twice when getting data through server side (bServerSide='true')
scrollX show header twice when getting data through server side (bServerSide='true')
Parimal
Posts: 17Questions: 1Answers: 0
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);
}
This discussion has been closed.
Answers
Please link to a test case showing the issue.
Allan
I don't know how to link to test case as datatable getting data from server.
Find my dataTable configuration which might help.
//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; } }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"}
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.
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