Scroll Rendering is slow

fearednerd

Hi,

Been using datatables in the past year and I love everything about it. Especially the forums and documentation.

I've been getting complaints that the scrolling is a bit slow. After looking into it with the Chrome Developer Tools it seems that is the scrolling is pretty slow. It takes 2.71s for the scroll event which is slow compared to the 56ms in the example with 2500 rows.

I am stuck and not sure why the scroll rendering of the rows is that slow. I do not want to post the debug on the forum since there is some sensitive data. I can PM the debug.datatables link if needed.

I am using Scroller, TableTools, and Colvis. The Json data is cached so the processing shouldn't be taking so long.
This specific table I am working on is ~200 rows and ~60 columns. I am wondering if the large number of columns are causing the issue?

EDIT: After a little more snooping I found that jquery.js is being called a lot. Here's a screenshot of the developer tools http://imgur.com/ex04N7i
This is my initialisation options:
[code]{
"bAutoWidth": false,
"bStateSave": true,
"fnStateSave": "function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
}",
"fnStateLoad": "function (oSettings) {
var data = localStorage.getItem('DataTables_'+window.location.pathname);
return JSON.parse(data);
}",
"bSortClasses": false,
"bJQueryUI": true,
"bProcessing": true,
"aoData": [{}],
"sScrollY": "375px",
"sAjaxSource": "*************",
"bDeferRender": true,
"sAjaxDataProp": "invs",
"aoColumnDefs": [{
"fnRender": "function ( oObj ) {
return ''+oObj.aData.investigator.full_name+'';
}",
"iDataSort": 8,
"aTargets": [0]
}],
"aoColumns": [{***********}],
"bScrollCollapse": true,
"sDom": "<\"class\"C>T<\"clear\">lrtipS",
"oTableTools": {
"sSwfPath": "https://**********/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [{
"sExtends": "copy",
"bSelectedOnly": "true"
}, {
"sExtends": "csv",
"bSelectedOnly": "true"
}, {
"sExtends": "xls",
"bSelectedOnly": "true"
}, {
"sExtends": "text",
"sButtonText": "Select Visible",
"fnClick": "function (nButton, oConfig, oFlash){
var oTT = TableTools.fnGetInstance( 'sort_table' );
var data = oTable.$('tr', {\"filter\":\"applied\"});
for(var i = 0; i< data.length; i++)
{
if(!oTT.fnIsSelected(data[i]))
{
oTT.fnSelect(data[i]);
}
}


}"
}, "select_none",
{
"sExtends": "csv",
"sButtonText": "Export All Investigators",
"bSelectedOnly": "none"
}]
},
"oScroller": {
"displayBuffer": 3
},
"oColVis": {
"bCssPosition": true,
"sSize": "css",
"fnStateChange": "function (){
oFC.fnUpdate();
var h = $('.dataTables_scrollHeadInner tr.ntrow').height()
$('.DTFC_LeftHeadWrapper tr.ntrow').css(\"height\", h);
redraw_st();
}",
"aiExclude": [0, 1, 2, 8]
},
"sScrollX": "2000px",
"iDisplayLength": -1,
"aLengthMenu": [
[-1],
["All"]
],
"sPaginationType": "full_numbers",
"fnInitComplete": "function () {
oTable.fnAdjustColumnSizing();
this.fnSettings().oScroller.fnScrollToRow( 1 );
$('#sort_table').hide();
$('#sort_table').hide();
$('#sort_table').show();
$('#sort_table').show();
}",
"fnRowCallback": "function ( oSettings ) {
$('#sort_table').hide();
$('#sort_table').hide();
$('#sort_table').show();
$('#sort_table').show();
}"
}[/code]

Any help or comments are greatly appreciated

allan

The row callback function looks very inefficient - does it help if you remove that?

Allan

fearednerd

Thanks that worked. I don't know why the previous guy working here added that.

Also love the notification popup on the bottom left you added on to the site.