tabs on table too slow
I have a display of data, which looks very much like a table. The display is made up <ul> and <li> elements. There are about 25 columns and 1000 rows of data in the display. What I would like to do is have tabs on top of the table that change the data displayed within the table. I have tried several techniques and the data displays too slowly. Does anyone have an idea on how I could solve this problem?
BottleNecks I have discovered:
1)Any kind of server communication(AJAX) won't work, takes too long to download the information
2) I have tried one massive table with all the data. The ul elements were floated left and acted as columns. All the columns that did not belong to the current tab had display:none. When a new tab was selected, display was set to block for the relevant columns. This worked, but was too slow.
3) I have tried IFrames, this worked great, if you were on the internal lan(way to big of a download)
4) I have tried having everything rendered in memory, then setting the innerHTML for the element on the dom to the element in memory. This is the most promising so far, but will complicate my future designs and is still not very fast.
Hope this made sense :)
All right, I think I found a way to do it. Tables can apparently be rendered with great speed with a little fiddling. I am now using a table with the css property table-layout:fixed. Everything is moving quite a bit faster.