jquery - Fast way to dynamically fill table with data from JSON in JavaScript

Question

I am experimenting with jQuery, JSON etc. and came across following task. I have a loader script on the server which returns table data in JSON format. When received the JSON data, I want to fill my table with them. I am currently using code similar to following (there are more columns and some more advanced processing, but you got the idea):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

This works pretty much ok. But once the data is growing it's getting terribly slow. For few hunderts of records it take up to about 5s (Firefox, IE) to build the table and that is a bit slow. If I e.g. create the whole HTML on the server and send it as string which I include in the table it will be pretty fast.

So, is there faster way to fill the table?

NOTE: I know what is paging and I will use it in the end so please don't say "What do you need such a big table on your page for?". This question is about how to fill table quickly no matter how many records you will display :)

Answer 1

See my response to an earlier similar query using arrays and "join".

Don't use jQuery at all until the very end, when you call it just once. Also, cut out string concatenation as well by storing the strings in an array and using the "join" method to build the string in one go.

e.g.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join(''));