Slow performance on Firefox 18 and Internet Explorer 9; Works well in Chrome

josephjgm

I have a 30 row/97 column table with fixed column and horizontal scroll. The initialization code is below with an animate call to scroll the table to a specific column. On Firefox, it takes over 15 seconds to render the table. On IE, it takes over 1 minute. On Chrome, it takes 1 or 2 seconds. What can I do to improve load time?

[code]
oTable = $('#sampleTable').dataTable( {
"sDom": 'T<"clear">tr',
"bPaginate": false,
"bSort": false,
"bSortClasses": false,
"bProcessing": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"aoColumnDefs": [
{ "aTargets": [ 0 ], "sClass": "left" },
{ "aTargets": [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97 ], "sWidth": "70px", "sClass": "right" }
],
"oTableTools": {
"sSwfPath": "/Content/flash/copy_csv_xls_pdf.swf",
"aButtons": ["xls","csv"]
}
} );
new FixedColumns( oTable, {
"iLeftColumns": 1,
"iLeftWidth": 180
} );

$('.dataTables_scrollBody').animate({
scrollLeft: $('#sampleTable').find('.startingIndex').first().parent().prev().position().left
});
[/code]

Also, the data in the table will be updated based on some variables on a separate script. The following is what I've implemented to update rows. In Firefox, I get a Warning: Unresponsive script message: [quote]A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.[/quote]


[code]
oTable.fnUpdate(oTable.fnGetData(0).slice(0, startingIndex).concat(newRowData0), 0, undefined, false);
oTable.fnUpdate(oTable.fnGetData(1).slice(0, startingIndex).concat(newRowData1), 1, undefined, false);
oTable.fnUpdate(oTable.fnGetData(2).slice(0, startingIndex).concat(newRowData2), 2, undefined, false);
oTable.fnUpdate(oTable.fnGetData(3).slice(0, startingIndex).concat(newRowData3), 3, undefined, false);
oTable.fnUpdate(oTable.fnGetData(5).slice(0, startingIndex).concat(newRowData5), 5, undefined, false);
oTable.fnUpdate(oTable.fnGetData(6).slice(0, startingIndex).concat(newRowData6), 6, undefined, false);
oTable.fnUpdate(oTable.fnGetData(7).slice(0, startingIndex).concat(newRowData7), 7, undefined, false);
oTable.fnUpdate(oTable.fnGetData(8).slice(0, startingIndex).concat(newRowData8), 8, undefined, false);
oTable.fnUpdate(oTable.fnGetData(9).slice(0, startingIndex).concat(newRowData9), 9, undefined, false);
oTable.fnUpdate(oTable.fnGetData(10).slice(0, startingIndex).concat(newRowData10), 10, undefined, false);
oTable.fnUpdate(oTable.fnGetData(12).slice(0, startingIndex).concat(newRowData12), 12, undefined, false);
oTable.fnUpdate(oTable.fnGetData(13).slice(0, startingIndex).concat(newRowData13), 13, undefined, false);
oTable.fnUpdate(oTable.fnGetData(14).slice(0, startingIndex).concat(newRowData14), 14, undefined, false);
oTable.fnUpdate(oTable.fnGetData(15).slice(0, startingIndex).concat(newRowData15), 15, undefined, false);
oTable.fnUpdate(oTable.fnGetData(17).slice(0, startingIndex).concat(newRowData17), 17, undefined, false);
oTable.fnUpdate(oTable.fnGetData(18).slice(0, startingIndex).concat(newRowData18), 18, undefined, false);
oTable.fnUpdate(oTable.fnGetData(19).slice(0, startingIndex).concat(newRowData19), 19, undefined, false);
oTable.fnUpdate(oTable.fnGetData(20).slice(0, startingIndex).concat(newRowData20), 20, undefined, false);
oTable.fnUpdate(oTable.fnGetData(21).slice(0, startingIndex).concat(newRowData21), 21, undefined, false);
oTable.fnUpdate(oTable.fnGetData(22).slice(0, startingIndex).concat(newRowData22), 22, undefined, false);
oTable.fnUpdate(oTable.fnGetData(23).slice(0, startingIndex).concat(newRowData23), 23, undefined, false);
oTable.fnUpdate(oTable.fnGetData(25).slice(0, startingIndex).concat(newRowData25), 25, undefined, false);
oTable.fnUpdate(oTable.fnGetData(26).slice(0, startingIndex).concat(newRowData26), 26, undefined, false);
oTable.fnUpdate(oTable.fnGetData(27).slice(0, startingIndex).concat(newRowData27), 27, undefined, false);
oTable.fnUpdate(oTable.fnGetData(28).slice(0, startingIndex).concat(newRowData28), 28, undefined, false);
oTable.fnUpdate(oTable.fnGetData(29).slice(0, startingIndex).concat(newRowData29), 29, undefined, false);
oTable.fnUpdate(oTable.fnGetData(30).slice(0, startingIndex).concat(newRowData30), 30, undefined, false);
oTable.fnUpdate(oTable.fnGetData(31).slice(0, startingIndex).concat(newRowData31), 31, undefined, false);
[/code]

allan

How fast (or not) is the initialisation without the fnUpdate calls?

I think it will be FixedColumns that is showing things down. That many update calls will make FixedColumns redraw like crazy. Try it without FixedColumns as well. You might be better calling fnClearTable and then fnAddData to add the new data in a single call.

Allan

josephjgm

Hi Allan. The initialisation on Firefox takes over 15 seconds to render the table. On IE, it takes over 1 minute. On Chrome, it takes 1 or 2 seconds.

Regarding the table update, I tried the fnClearTable and fnAddData. That solved my update issue.

Thanks!

- Joseph