19

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 :)

Improve this question

3 Answers 3

Reset to default
55

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(''));
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

+1 Very nice, made a huge difference in the speed of my code!
@Neil - you can shave off a few more milliseconds by changing your last line to $('#dataTable')[0].innerHTML = r.join('');. jQuery's html method does a lot more than just paste in your generated html code.
@Brandon, Thanks for that. I often forget that there is some overhead in jQuery that you can cut out by using DOM elements directly.
My suggestion, dont Use Jquery, it is very slow in IE , use native DOM methods. See my detailed analysis below.
6

Try deferring the addition of the table to the running DOM until as late as possible.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

This should prevent any page layout until the whole table is ready.

If performance is a real problem I'd also avoid calling methods that require parsing strings, like all those $('<td>') calls. For a single element the overhead of that is probably quite expensive (although it's worth it if you have a long string of HTML).

As I understand it, adding large strings of tags using .append() or .html() is supposed to be pretty efficient. What you lose is the control that you would have if you had used .text() to fill the table cells to avoid HTML code injection.

Improve this answer

2 Comments

i am doing as Alnitak said. +1
I did the same via .detach() and .appendTo() in the end. It is probably a bit faster +1
0

It's probably faster to build the HTML for the entire row and add the row to the table rather than adding each individual element one at a time. You could also extend that to building all of the HTML in a string, then adding it all at one go, which would be even faster. In an MVC environment, I'd probably return a partial view (HTML) that has the table since that would maintain separation of concerns. I would avoid building HTML on the server (in a controller), though, as that would mean that you'd have to change code whenever you wanted to change how the table was displayed. If you're using PHP or another scripting language, then filter as appropriate for your environment.

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

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);
Improve this answer

3 Comments

If you're adding a new table, you could build the entire table as a string as well and simply add it to the DOM at the appropriate place. Since you gave your table as an HTML element, I've stuck with that approach for the example.
This is definetly something I can do, but the solution with adding elements instead of one string seemed to be more elegant to me. But I can probably sacrifise that :)
@Jan - IE (at least before 9, I haven't tested 9) is particularly slow at adding elements, probably because of the internal data structures they use. I've always found it faster to construct the whole string and simply add it all at once.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.