500R*64C Datatable take long time torender in IE11
500R*64C Datatable take long time torender in IE11
alaa.abuzaghleh
Posts: 4Questions: 1Answers: 0
Hi Datatable team,
we have large table which is 500r*64c all text, the table render very fase in FF, Chrome, and Opera but when it come to IE 11 it take around 15s to render most of the render time spend in drawing the table cell and applying the CSS for our data table the following is our code create the datatable
<
script>
var table;
var colIndexByHeader = {} ;
var selectMap ={};
$(document).ready(function() {
var ths = $('#coordinatorList th');
for(var j = 0 ; j<ths.length;j++){
var th1 = $('#coordinatorList th').eq(j);
colIndexByHeader[th1.text().trim()] = j ;
}
// DataTable
table = $('#coordinatorList')
.DataTable({
pagingtype: "simple_numbers",
lengthMenu: [[500, 1000, -1], [500, 1000, "All"]],
bProcessing : true,
"bAutoWidth": false,
"scrollY": 600,
"scrollX": true,
searchDelay: 500,
"deferRender": true,
"iDeferLoading": [ 100, 500 ],
oLanguage: {
sProcessing: "Processing... <img src='resources/images/LoaderIcon.gif'>"
},
"fnInitComplete": function (oSettings, json) {
$('#coordinatorList_filter input')
.off('.DT')
.on('keyup.DT', function (e) {
if (e.keyCode == 13) {
table.search(this.value).draw();
}
});
$('#coordinatorList_filter input').attr("placeholder" , "Type keyword then enter") ;
this.fnAdjustColumnSizing();
this.fnDraw();
},
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
aoColumns: [
{mData:"coordinator", "sWidth" : 100 },
{mData:"cstmrsvc", "sWidth" : 100 },
{mData:"status", "sWidth" : 100 },
{mData:"rezdays", "sWidth" : 100},
{mData:"actionitem", "sWidth" : 100},
{mData:"railbillstatus", "sWidth" : 100},
{mData:"location", "sWidth" : 100 },
{mData:"ln", "sWidth" : 100 },
{mData:"vendorId", "sWidth" : 100 },
{mData:"equipid", "sWidth" : 100 },
//{mData:"equip", "sWidth" : 100},
{mData:"size", "sWidth" : 100 },
{mData:"shipDate", "sWidth" : 100 },
{mData:"shippersNo", "sWidth" : 100 },
{mData:"custpu", "sWidth" : 100 },
{mData:"loadNumb", "sWidth" : 100 },
{mData:"puNumber", "sWidth" : 100 },
{mData:"hazMat", "sWidth" : 100 },
{mData:"descrip", "sWidth" : 100 },
{mData:"stcc", "sWidth" : 100 },
{mData:"pieces", "sWidth" : 100 },
{mData:"weight", "sWidth" : 100 },
{mData:"seal", "sWidth" : 100 },
{mData:"ldft", "sWidth" : 100 },
{mData:"intdom", "sWidth" : 100 },
{mData:"rd1", "sWidth" : 100 },
{mData:"booking", "sWidth" : 100 },
{mData:"scq1", "sWidth" : 100 },
{mData:"plan1", "sWidth" : 100 },
{mData:"ofc1", "sWidth" : 100 },
{mData:"routing1", "sWidth" : 100 },
{mData:"rail1", "sWidth" : 100 },
{mData:"orig1rp", "sWidth" : 100 },
{mData:"shipName", "sWidth" : 100 },
{mData:"shipcity", "sWidth" : 100 },
{mData:"shipst", "sWidth" : 100 },
{mData:"driver1", "sWidth" : 100 },
{mData:"dispatched", "sWidth" : 100},
{mData:"apptment", "sWidth" : 100},
{mData:"apptment2", "sWidth" : 100},
{mData:"odrop", "sWidth" : 100},
{mData:"unidate", "sWidth" : 100},
{mData:"arrival", "sWidth" : 100},
{mData:"leave", "sWidth" : 100},
{mData:"terminal", "sWidth" : 100},
{mData:"dest1rp", "sWidth" : 100},
{mData:"conname", "sWidth" : 100},
{mData:"concity", "sWidth" : 100},
{mData:"constt", "sWidth" : 100},
{mData:"driver4", "sWidth" : 100},
{mData:"fromyard", "sWidth" : 100},
{mData:"cnapptment", "sWidth" : 100},
{mData:"cnapptment2", "sWidth" : 100},
{mData:"ddrop", "sWidth" : 100},
{mData:"cutoff", "sWidth" : 100},
{mData:"eta", "sWidth" : 100},
{mData:"cnreldate", "sWidth" : 100},
{mData:"cnunidate", "sWidth" : 100},
{mData:"cnarrival", "sWidth" : 100},
{mData:"cnleave", "sWidth" : 100},
{mData:"cndrpdate", "sWidth" : 100},
{mData:"cnunrdate", "sWidth" : 100}
],
serverSide: true,
ajax: {
url: "${pageContext.request.contextPath}/getOperationsWorkFlowDataTable",
contentType: "application/json",
type: "POST",
data: function ( d ) {
// adding the coordinator, csr values to the request object
var coordinators = $('#coordinatorMultiDDL option:selected');
var globalCords = [];
$(coordinators).each(function(index, coord){
var o = $(this).val();
var c = o;//.substring(0, o.indexOf("(")).trim();
globalCords.push(c);
});
d.coordinatorsGlobFilter = globalCords ;
var csrs = $('#csrMultiDDL option:selected');
var globalCsrs = [];
$(csrs).each(function(index, csr){
var o = $(this).val();
var c = o;//.substring(0, o.indexOf("(")).trim();
globalCsrs.push(c);
});
d.csrsGlobFilter = globalCsrs ;
var globalCondition = $('#conditionDDL option:selected').val();
d.globalCond = globalCondition ;
if(table){
var colVisible = table.columns().visible();
var cols = d.columns ;
for(var i=0;i<cols.length;i++){
cols[i].visible=colVisible[i] ;
}
}
return JSON.stringify( d );
}
,"dataSrc" : function(json){
if(!json.filterMap && json.filterMap.length==0 ){
return json ;
}
var fmap = json.filterMap
for (var x in fmap)
{
// get the suitable filter drop down by id
// the id has to be select_x
var currentSelect = $("#select_" + x) ;
// clear all the option from this select
currentSelect.empty() ;
var html="" ;
var value = fmap[x];
for (var y in value)
{
// if empty add it and continue
if(y.trim()==""){
currentSelect.append("<option value=''></option>") ;
continue ;
}
// now in the current select we need to add options
// the option is y
// from the server we send it as facets in form of x (number of occurance)
// number of occurance has to be green
// value must remove the facet count
var currOpt = value[y] ;
var currOptVal = currOpt.substring(0, currOpt.indexOf("(")) ;
var currOptVal = currOptVal.trim() ;
//make it green
var currOptText = currOpt.replace("(" , "<font color=\"green\"><b>(")
.replace(")" , ")</b></font>") ;
// now append it
currentSelect.append($('<option>', {value:currOptVal, html:currOptText}));
// lovely
// identify if the select is pre selected and set the selected value
if("select_" + x in selectMap && selectMap["select_" + x] == currOptVal){
$("#select_" + x).val(currOptVal);
}
}
}
return json.data ;
}
}
});
</script>
</head>
anyhelp in this regards will be highly appreciated.
This discussion has been closed.
Answers
You are using server-side processing, so the key question is: how long does the server take to reply to the request? If you could link to the page, as requested in the forum rules, I'd be able to say.
Allan
the server side process done with around 300MS
I'm afraid I'd need a link to the page in order to be able to performance debug it in that case.
Allan
it is intranet application
i note some thing strange too, /getOperationsWorkFlowDataTable is called twice this not in IE only, this in all browser, I am sure that I dont call the table from other place, the only place I call this url in document.ready I dont know why it called twice