Sorting large tables

[jswill]

The main problems are:
- adding rows to tables via appendChild is slow if there is markup in any cell. (My rows have only 3-8 cells)
- the same markup seems to increase the "lag" time to display, increasing further the apparent time to sort.

Some info:
I am trying to sort tables that may have thousands of rows. My sort works fine (acceptable) for < 500 rows. The actual speed (from click to sort, to final display) depends on what are in the TD cells. I found that if I have a SELECT node (or anything that adds markup) in a TD, it dramatically slows the building of the table.
My logic is:
- click on any column header. This sets the sort column and type (String,Number, etc)of compare function - no problem here.
- iterate through all the rows, collecting the selected column's value for the each row and associate the row with that value:

I create an array of associative arrays :
arr.push( { key: getCellValue(currentRow, col), row: currentRow } ).
then to sort I just compare the keys.

- sort this array. This is very fast - still no problem. I can sort any column just fine.
- iterate the newly ordered array, appending the rows to the TBODY of th table.

HERE IS THE PROBLEM
Even though I am just appending the rows to the TBODY, if a TD has any markup in it, the process is very slow. I am not in any way working with the cells during this process--I have a key and the row where the key came from, then I append by going through the sorted array.
I have noticed that there is a lag time from the time my code completes the sort process (sort and rebuilding DOM) before the browser displays. So the sort process can take, say, 500ms but the browser doesn't show any change for another 500 to 1000ms, for an overall appearance of 1-1.5 secs for a 500 row sort. (This is a "fast" example for 500 rows) If I use any markup in a TD the times increase to 4-5 secs, followed by the lag of another 4 to 5 secs. This makes it appear to take 10-12 secs to sort 500 rows! And I have to handle up to 10000. So far there is no way I can do it.


Any ideas or tips would be greatly appreciated.

[acoder]

The DOM methods may be slow - innerHTML may speed things up.

See the following for ideas:
http://www.kryogenix.org/code/browser/sorttable/
http://www.frequency-decoder.com/200...ript-revisited
http://www.workingwith.me.uk/article..._table_sorting

[rnd me]

in my experience, it is much faster to build a javascript array that you manipulate, then build/find a good and fast array to html table method.

i find that turning the array into a string of table code and using parent.innerHTML to be fastest.


further suggestions on table-making this way:
also use good html table coding techniques like <cols>, rows= attribs, tbody, and so on. (see w3schools).
this will reduce the parsing and rendering time of your strings.
set size positions where you can.
use css classes instead of long style attribs.
replace multiple dot variables with shorthand variables. this can vastly increase the speed of looped code.
eg: instead of: alert(a.b.c.d)
try something like var C=a.b.c; alert(C.d)

[mrhoo]

I would say that if you can sort and redraw a 500 row table onscreen in 1-1.5 seconds you are doing pretty well!

My only suggestion for a (shudder) 10000 row table is to draw a table with an initial tbody of, say, 100 rows, and a '...loading' message on the last row.

You can build another tbody offscreen with the remaining 9900 rows, or even in chunks of 500, and add the balance to the displayed table when it ready.

It might take longer than your original code, but there will be something to look at right away.

[ngreen77]

I faced a similar problem, so I wrote this project to tackle the problem of sorting a vast number of DOM element as quickly as the browser can render it: https://github.com/ngreen77/FastDomSorter