Question

I was just wondering what was the most efficient way of adding lots (sometimes about 1000) of table rows through jQuery. At the moment I use jQuery ajax to get the data through JSON then i loop over the json object and construct html into a variable and then add that html into the table. e.g.

var arrayObject = $.parseJSON(data);
var htmlToShow = '';
$.each(arrayObject, function(index, value){
    var htmlToShow += '<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>';
});
$('#tableResults').html(htmlToShow);

I was just wondering what is the least intensive method of doing this? Thanks in advance.

Answer 1

I think sending row data in JSON is better than making HTML code on server side.
Efficient way to do this on client side is (array operations are much faster than string concatenation):

var rows = $.parseJSON(data);
var html = [];
for (var i=0; i < rows.length; i++){
    html.push('<tr><td>' + rows[i].column + '</td></tr>');
}    
$('#tableResults').html(html.join(''));

UPDATE: As hradac showed in comment below, on newer browsers with faster JS engines (Chrome, FF) string concatecation is faster than array joins – proof