Quick HTML Table Sorting?

Question

Yes, I know there are a lot of JS/jQuery programs out there to do this. I'm currently using http://www.kryogenix.org/code/browser/sorttable/sorttable.js . It's very easy: just a JS file, add a few class attributes to your table, and you're off. In particular, you don't actually need to know JS to use it, and you can add custom sort keys without needing to write your own JS to extend it. I like it a lot for those two reasons. The main problem: my table is ~9300 rows long, and sorting takes 10-20 seconds. So I'm wondering, are any other scripts out there faster than this? These are the ones I've found:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (Not even sure what this uses)
http://tablesorter.com/docs/ (Really really nice, but not easy to extend, requires knowing JS/jQuery) http://flexigrid.info/ (Overkill, I just need a table sorter, not a whole data manipulation program)
http://datatables.net/ (Overkill, requires Js/jQuery to extend)

I'm sure there's 5000 other programs that can do what I want, but I don't have the time to figure out and test them all to see if they're fast. Thus I'd like to know if someone out there on StackOverflow can point me to whichever library they know to be fast, so I only have to figure out how to use one program.

(Btw, I've seen Java sort hundreds of thousands of numbers in milliseconds with quicksort; does anyone know what algorithm JS.sort() uses?)

Answer 1

I have had great success with DataTables (another jQuery plugin) with similar row numbers to what you are talking about. The speed loss you are seeing with javascript over what you have seen in java is it is actually rendering a DOM, which is a lot more work. The beauty of DataTables is you have the ability to source the data from a javascript array (essentially json) - so the sorting is done on the array (similar speed to java), and then only the part of the table the user needs to see is generated in the DOM.

See these urls for examples:

http://datatables.net/examples/data_sources/js_array.html

or

http://datatables.net/examples/data_sources/ajax.html

I suggest using the latter. If its still not fast enough using a static json array, you will want to build a serverside script to take the load off javascript - great example with serverside code here:

http://datatables.net/examples/data_sources/server_side.html

Edit: Infinite Scrolling

As discussed in the comments, the problem isn't the sort, but rather converting the HTML table to JS and back. This may help out by only loading rendering parts of the returned sort as the user views it; the server also provides the JS the same information as the table in JSON form. These two techniques eliminate the HTML-JS conversion and rendering problems, and thus greatly increase speed.

HTML (this is all that has to be rendered initially before the JSON comes along - add as many th tags as you have columns):

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JQUERY:

$(document).ready(function() {
    $('#table_id').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px",
        "bProcessing": true,
        "sAjaxSource": 'array.txt'
    });
});

array.txt contains:

{ "aaData": [
    ["This will be in column 1","This in two","this in 3"],
    ["another row - column 1","another two","another 3"]
]}

Answer 2

Apart from libraries, table sorting is quite easy to do it by yourself.

The time it takes to actually sort the rows is negligible in relation to the time the DOM needs to move items around.

The one thing that WILL give you the best performance, is to detach the rows, arrange them according to your needs and attach them again. You don't need raw JSON data, just detach the $tr's, grab the values you want to compare from td's, make an array of $tr's, sort this array according to the column you want and attach them back to your tbody.

For example, with this technique I am sorting 3000 rows of 15 columns in 1 second time, which is totally viable. With that performance, the only problem is how to fetch 3000 rows to the browser...