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?
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:
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 });
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:
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.
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);