partial rendering of a large table in jQuery

Question

I have a table with about 5,000 rows which I build dynamically with jQyuery. I was wondering if there is a way to display the rows in chunks as the table is being built, until finally showing all of the rows?

I have tried this but with no luck. So far I have tried the following:

a) Creating the stubs b) Getting the total rows and dividing them into smaller chunks. c) Injecting the first chunk into the table and embedding a call to a function in the last row to call the next batch of data to load).

Unfortunately, even this way it wants to wait until everything renders. Is there a way around this?

Answer 1

Why would you want 5K rows in a webapp? I strongly suggest you use paging.

Otherwise, the solution c) seems the best and should work. Perhaps you just need some small tweaks. Are you calling the next batch of data with an ajax call? What do you see while it's loading the next batch of data? Is the browser stalling?

Answer 2

paging would be the best solution. there are already a number of good jquery datagrid plugins out on the scene such as flexigrid and jqgrid. check those out.

Answer 3

Use setTimeout to generate the next chunk of the table, by giving up the UI thread for a little bit, it'll display the table parts as they are generated.

By calling the generation code in the bottom of the generated code, you were never relinquishing the thread.