Loading large data in jquery

Question

I have a web service that returns data, quite a large set, could be 600 rows, by 20 columns. What is the fastest most efficient way to load this data into an html table in Jquery code?

I tried creating the table html by looping through the data returned and creating a table DOM inside a string, but the looping part is very slow. I have heard of Jquery Templates, but I am not sure this technology is fast enough for large sets of data....

Thanks

Answer 1

Is it possible for you to alter the web service or have another service call it and parse the data server side and return HTML? Processing the JSON on the client-side is going to be your bottleneck. If you can have the service return the required HTML to you, then it's a simple element.html(data) on the client side.

Edit: The question of returning JSON or HTML and the pros and cons of each have been discussed here quite a bit: 1, 2, 3, 4, 5

Answer 2

It seems this is a matter of design. loading 600 x 20 data items at once is not a good idea. Consider clients with low system resources like pocket PCs or TCs (thin client) would suffer to visit such a page.

You need to cache webservice data and load it in chunks into client browser based on the user action. You can use some Ajax controls to do so.

Answer 3

If your goal is to have the user be able to interact with the data as fast as possible, may be you want to consider something like infinite scroll (also called continuous scroll) pattern so you build the grid as needed from the scrolling of the user and not spend the whole time rendering the grid upfront.

Some links:

http://www.infinite-scroll.com/

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

Answer 4

I think this is where JSON DB might be best useful... you could write a server-side page that responds with json db formatted data for a few rows.. then do your own ajax code to load the rows and process them in your choice of display model like your own <table> with "overflow:auto;" and add rows to that table in chunks.. or use something like 'infinite scroll' already suggested.