CODEWITHSUNDEEP
jquery
Timothy Ruhle
Timothy Ruhle

Reputation: 7597

jquery add table row efficiency

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.

Upvotes: 2

Views: 6846

Answers (6)

hamczu
hamczu

Reputation: 1774

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

Upvotes: 7

Ho&#224;ng Long
Ho&#224;ng Long

Reputation: 10848

You may try to display your data as paginated data. By that way, you only need to show part of the all data at a time. It's because few people can scroll to view all 10.000 data row at a time in a website.

For example, you may have a function like this: getPaginatedData(offset, max, condition).

In that, you get the data that fits condition, the max row it should get, and the offset of the data row you begin with.

For example: instead getting 10000 data rows from table CUSTOMER, you can do that. If the viewer is on page x, you can get 100 customer out of 10000 customer (sorted by name), begin at the position x, then construct the html at client side. I believe that this approach (if it fits your desires) is more efficient than constructing HTML at server side, which increase the traffic and server side complexity.

Upvotes: 1

jamesmortensen
jamesmortensen

Reputation: 34038

I don't believe it's a good idea to bury HTML code on the server side, or even in JavaScript code. It's a generally accepted practice that you should keep your content, presentation, and behavior separate. This is similar to the idea of MVC.

There is a plug-in for JQuery called DataTables. It's great for developing dynamic HTML tables without having to code from scratch.

This example demonstrates an AJAX call to the server that returns a JSON response representing the table. I believe JSON is a better option for data transport because it keeps your content where it belongs, on the client-side. It also makes your server-side code more reusable, as other client-side applications can then consume that data and render it in whatever format that client-side chooses, be it HTML, XML, JSON, or some other format.

http://www.datatables.net/examples/data_sources/server_side.html

There is also an example of adding a row to an existing table, without reloading the page. In this example, the row is passed into the API as a JSON Array. This example could easily be modified to take a series of arrays, if you were returning more than one row of data in your response.

The main benefit is that there are third-party libraries to convert server-side objects to JSON, and DataTables of course will convert that to your HTML, eliminating the need for you to troubleshoot bugs in your HTML-generation strategy.

http://www.datatables.net/examples/api/add_row.html

In the end, your web designers will thank you for keeping the HTML where they can easily access it, on the client side, instead of buried in some server-side function surrounded by code that they may or may not be familiar with.

Upvotes: 2

coder_tim
coder_tim

Reputation: 1720

You might try:

$(htmlToShow).appendTo('#tableResults');

Upvotes: 0

Phrogz
Phrogz

Reputation: 303136

I think this is about as good as you're going to get:

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

Incrementally building all the intermediary strings with += is not a good idea. Using html() to set one big blob of HTML (as you did) is, however, a good idea.

If you need to add additional rows to an existing table, note that it is legal to add multiple tbody elements to the same table. Do this and then set the html() of the new tbody en mass as above.

Edit: Well, I modify my answer. If you really, really want to eek every last bit of performance from your script, don't use jQuery. Don't use map, don't use each. Write your own for loop to map one array to an array of strings, join them, and then set the innerHTML directly. But I think you'll find the performance savings in doing this do not merit the extra work, testing, or possible fragility.

Upvotes: 1

SLaks
SLaks

Reputation: 887195

The most efficient option would be to generate HTML on the server, then set it directly to the innerHTML.

Upvotes: 1

Related Questions