Populating a table by ajax is very slow

Question

I have written a web service that returns some data as json. To display this in a table I am using the datatables jquery plugin:

for(var i=0;i<results.length;i++){
       myTable.fnAddData( [
       "<input name='codeSearched' type='radio' value='"+results[i].ID+"' />",
       "<span id='code_"+results[i].ID+"'>"+ results[i].code+"</>",
       results[i].description ] ,true);
}

This javascript seems to kill the browser. (20+ seconds on firefox for just a few thousand rows). I have loaded similar amounts of data into a datatables table before orders of magnitude faster by rendering it server side as an html fragment and inserting directly into the dom.

Can you recommend a way to get the best of both worlds? (I.e, call an ajax web service that serves data in an open structured format, but also parse and render quickly?

Thanks for any suggestions

Answer 1

You will want to get some timing information to see how quickly your call comes back.

There are two ways I do this, one is to use firebug to see how long it takes, and also to put in timing around my call so I can see how long from when I start the call to when I am actually done.

If that is acceptable, then building the table is the problem.

You will want to look at this article to ensure your technique isn't killing you, timewise, as there is a different between using DOM functions and innerHTML.

http://www.quirksmode.org/dom/innerhtml.html

The next issue is that if you are trying to fully build the table, you will find that the browser won't show it until you are done, and that can be a killer.

So, what I have done in the past is to build it in pieces. So, I build up perhaps 100 rows, then use setTimeout so that the browser can display that, then I build the next batch, until I am done.

This way the user can quickly see the first part of the table, and it should be done before they need the entire table built (such as if they need to look at the bottom row).

How many rows to build at a time is a trade-off between user needs and performance.

Answer 2

Why don't you try to set the last parameter to "false"? It should run significantly faster, but the user would have to wait until the table is populated.

If it makes it fast enough, you may want to make it a bit more interactive, perhaps you could set the parameter "false", but "true" every 10 or a 100 records to allow redrawing the table.

The reason to fill a list of thousands of radio buttons is beyond me... it doesn't sound like a good User Interface practice, but you must have your reasons.

Good luck!

Luis