Quick HTML table sorting?

Question

Yes, I know that there are many JS / jQuery programs for this. I am currently using http://www.kryogenix.org/code/browser/sorttable/sorttable.js . It is very simple: just a JS file, add some class attributes to your table and you are turned off. In particular, you really do not need to know JS to use it, and you can add your own sort keys without having to write your own JS to extend it. I really like this for these two reasons. The main problem: my table is ~ 9300 rows long, and sorting takes 10-20 seconds. So I wonder if there are other scripts faster than this? These are the ones I found:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (not even sure what it uses)
http://tablesorter.com/docs/ (Really very nice, but not easy to expand, requires knowledge of JS / jQuery) http://flexigrid.info/ (Overkill, I just need a table sorter, and not a whole program for processing data )
http://datatables.net/ (Overkill, requires Js / jQuery extension)

I'm sure there are 5,000 other programs that can do what I want, but I don’t have time to figure it out and check them all to see if they are fast. So, I would like to know if any of them in StackOverflow can tell me which library they know to be fast, so I only need to figure out how to use one program.

(By the way, I saw that Java sorts hundreds of thousands of numbers in milliseconds using quicksort, does anyone know which algorithm uses JS.sort ()?

Answer 1

I have had great success with DataTables (another jQuery plugin) with similar line numbers, what are you talking about. The loss of speed that you see with javascript over what you saw in java is actually a DOM rendering that works a lot more. The beauty of DataTables is that you have the ability to generate data from a javascript array (essentially json) - so sorting is done by array (at the same speed as java), and then only the part of the table that the user should 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 serveride script to take the load off javascript - a great example with server code here:

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

Edit: Infinite Scrolling

As discussed in the comments, the problem is not in sorting, but rather in converting the HTML table to JS and vice versa. This can only help by loading the rendering parts of the return type when the user views it; the server also provides JS with the same information as the table in JSON form. These two methods eliminate the problems of converting and rendering HTML-JS and thereby significantly increase the speed.

HTML (this is all that should be rendered initially before the appearance of JSON - add as many tons of tags as you have):

<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

Besides libraries, sorting tables is pretty easy to do on your own.

The time required to actually sort the rows is negligible relative to the time when the DOM needs to move elements around.

The only thing that WILL give you better performance is to detach the lines, arrange them according to your needs and reattach them. You don't need raw JSON data, just separate $ tr, take the values ​​you want to compare with td, create an array of $ tr, sort this array according to the column you need and attach them back to your body.

For example, using this technique, I sort 3,000 rows of 15 columns in 1 second, which is quite viable. With this performance, the only problem is choosing 3,000 lines in the browser ...