best method in jquery for replacing rows in a table after server side processing such as mysql sorting - .html, .append, .clone, or other?

Question

What is the 'best practice' when returning dynamic data for a table (server side sorting, filtering etc from a db) ? Do you return just the data in json, and repeatedly clone a row element, replacing the values in each row (thus decreasing the size of the ajax call, but increasing the client side processing), or return the full html, and replace with .html or .append? Or is there another method I'm missing?

This is a frequent situation in my app, and in some cases a bottleneck, and I am unsure if what I am doing is the best solution. Currently, I return the row html and use a single .append call, after emptying all the rows except the header.

Answer 1

Building the HTML on the server and using .html() will be a LOT faster than any of the other methods you're describing. Especially if you're adding many rows it may be a good idea to pre-render HTML on the server.

An alternative is to use an efficient javascript template-engine. A good article on template engines for javascript can be found here:

http://www.west-wind.com/Weblog/posts/509108.aspx

In some cases using a good template engine can be almost as efficient as pre-rendering HTML on the server.