Best Practice advice - will datatables format/draw faster from array data, than html table data?

djdube@comcast.net

Hi All, First i have to say this is am amazing tool, I'm new to both jquery & datatables, the great samples from Allan and this forum have made it easy to learn and implement. Now that i have a great looking table, i need some best practice advice to make it work faster.

I'm hoping someone will find an error in the code below; because as soon as i write more that 200 rows to the table it starts painting slowly, so slow that i see the unformatted table before the formated data table.
Here's some background, the user required that i place each table in a tab, allow tables to grow to 100% of view port and they do not want any pagination. The 2 tables range from 1 to 3,000 rows usually 400 or less, each row contains 10-11 columns, they are created by kodo jdo, java, struts1, mvc & old jsp pages no ajax. So i have a 2 jquery tabs, 1 html table in each tab, each table scolls x & y, filters on, table tools on, and status on, pagination OFF. It looks great but doesnt work as fast as it should.
I had no luck placing the datatables script before jsp iterated and drew its html table, but placing the following script at the end of the page, after jsp has creates its html tables worked.

There are 2 problems left before it can go to production:
first i think i've done something wrong in the script below, the tables are clean but they paint slowly. I'm hoping this is because of the tables data source? I was wondering in general, will datatables draw a table faster when its data comes from an array rather than from an html table? I could change the java code to write an array.

second i have not been able to figure out how to return to tab2, when i leave the page from tab2 and page back again.

[code]
<%-- //end Tabs ContentGroup --%>
<%-- //end demo Tab Pannel --%>


$(document).ready(function() {
$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );

$('table.display').dataTable( {
"aoColumnDefs": [ { "sWidth": "10%", "aTargets": [ -1 ] } ],
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollY": "300",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"bProcessing": true,
"bSortClasses": false,
"TableToolsInit.sSwfPath": "../../media/swf/ZeroClipboard.swf",
"sDom": 'Tfrtip<"bottom"l><"clear">'

} );
} );
[/code]

Thanks for this great tool & your good advice.
djdube

allan

Hi djdube,

1. Speed - In terms of best practice, personally I would say that it is best to have the information in the DOM before DataTables loads, in order that those browsing without Javascript can still see the information in the table. With regard to each method, the DOM method is slowed down by reading information from the DOM, while the array method is slowed down by actually creating the DOM. It will depend on the browser, the complexity of the information and how many rows / columns you have to get an exact figure... However, there shouldn't be so much different that you see it at only 200 rows...

Are you using IE? I've noticed in the past that table initialisation is horrible slow on an element which has display:none (i.e. is hidden). I presume that this is an "optimisation" in IE (don't put into the cached DOM tree what is currently hidden), but it completely kills the reading of data. Try initialising the tabs after DataTables and see if that helps at all. Beyond that, you can consider server-side processing.

2. I don't see anything particularly obvious in the code which would stop the tabs being able to return. Are there any JS errors being generated, and / or does it work in other browsers?

3. The line "TableToolsInit.sSwfPath" won't work. TableTools 2 will do something like that, but not exactly... However for TableTools 1, you need to set that before you initialise the table. For example:

[code]
TableToolsInit.sSwfPath = "../../media/swf/ZeroClipboard.swf";
$('table.display').dataTable( { ...
[/code]
Allan