DataTable Performance

jtop

I hate to write a paragraph but here are the details...

* DataTable 1.8.1
* jQuery 1.4.4
* FixedColumns 2.0.1

I am not loading my tables asynchronously, but applying the DataTable and FixedColumns according to the example 'FixedColumns example - two columns fixed. I'm supplying my code below. We are finding that after our page renders, it is taking a significant amount of time to render the DataTable with the static data. If we remove the FixedColumns portion it renders much faster. Using the FixedColumns is causing IE7 to display the standard 'Stop running this script?' message on a table that contains 200+ records. Taking off FixedColumns allows me to render 1000 rows. The table column counts run anywhere between 16-30, and with all we are noticing this issue. (f.y.i. I'm applying direct style width's to the first 6 static columns.)

[code]
;jquery(function($) {
$(document).ready(function() {
var oTable = $('#results').dataTable({
"sScrollY": 325,
"bPaginate": false,
"sScrollX": "100%",
"bScrollCollapse": true,
"bSort": false,
"bAutoWidth": false,
"bSortClasses": false,
"bFilter": false,
"bInfo": false,
"bSearchable": false
});
new FixedColumns(oTable, {
"iLeftColumns": 6,
"iLeftWidth": 440
});
$(window).bind('resize', debouncer( function () {
oTable.fnAdjustColumnSizing();
}));
function debouncer( func , timeout ) {
var timeoutID , timeout = timeout || 200;
return function () {
var scope = this , args = arguments;
clearTimeout( timeoutID );
timeoutID = setTimeout( function () {
func.apply( scope , Array.prototype.slice.call( args ) );
} , timeout );
};
};
}
});
[/code]

Does anyone have any suggestions? Maybe I'm missing something?

allan

The reason you are seeing this issue is that FixedColumns is horrendously expensive in terms of clock cycles (out of necessity!) - hence why you are seeing the problem. Basically for every row that you have in your table, FixedColumns will need to calculate the height of the row (very expansive DOM interaction) and clone 6 TD cells (ouch). With thousands of rows this is going to add up significantly. Combine that with the ageing JS engine of IE7 and you get the slow script warning.

So there are a number of things you can do. You could ensure the all rows are the same height (using CSS or whatever) and set the row height matching algorithm used by FixedColumns to "none": http://datatables.net/docs/FixedColumns/2.0.0/FixedColumns.defaults.html#sHeightMatch_details . That will yield a huge speed increase alone.

You could reduce the number of fixed columns (which might not be an option - fair enough). And you could enable paging (reducing the number of rows to be fixed into place significantly.

I'm sure there are other ways as well - but basically you are processor bound with this one, since it is out of necessity a complex process to fixed the columns in place.

Regards,
Allan

jtop

Allan,

Thanks for the quick response. I assumes that was going to be the response, but i had to ask.