3

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

sarsnake
  • 26,667
  • 58
  • 180
  • 286

4 Answers4

2

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

Community
  • 1
  • 1
v64
  • 320
  • 1
  • 4
  • 9
  • Dealing with processed data is a good idea but still something should be done with data amount. – Xaqron Jan 04 '11 at 03:29
1

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.

Xaqron
  • 29,931
  • 42
  • 140
  • 205
  • Thanks, but I am trying to avoid using MS flavour of Ajax. I am sticking with the clean approach of Jquery. Is your idea basically something like: "when the user scrolls down" I load more data? – sarsnake Jan 04 '11 at 04:25
  • As v64 said rendering data at server side and returning html is a good idea but still manipulating large data object model (`DOM`) is cpu intensive. Personally believe in good design at first step rather than good technology. – Xaqron Jan 04 '11 at 04:26
  • The delay is not in DOM. It's in the simple Javascript loop. I only touch the DOM once: $("#tableDiv").html(tableHtmlString); The delay occurs when I build the tableHtmlString looping through 600 rows of data. – sarsnake Jan 04 '11 at 04:52
  • So you are doing some CPU intensive string manipulations. Maybe a revise in functions you use in building the table improve the performance. – Xaqron Jan 04 '11 at 11:33
  • no string manipulations. only appending the strings to the tableHtml variable, The delay is the wost in IE (IE7) (surprise). It's 15 seconds for 660 rows and 14 columns. – sarsnake Jan 04 '11 at 17:49
  • 15 seconds is a lot of time but 660 is much more. No idea without see the code. Can you give a demo link ? – Xaqron Jan 04 '11 at 23:58
1

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/

Jaime
  • 6,736
  • 1
  • 26
  • 42
0

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.