Is it possible to sort an HTML table without freezing the browser?

Question

I've written a web page with an HTML table that contains hundreds of rows. I've programmed my page with JavaScript so that the user may click on the header at the top of any column to sort the table by that column.

It works well, but it takes a little while because there are so many rows. I am using the JavaScript array.sort method to sort the underlying data which is then used to write the rows of data to the page.

The problem is that when the user clicks on a header, the browser freezes until the operation is complete. Is there someway to program my page so that the browser does not freeze while the table is being sorted?

I think putting logic of sorting in jquery's document.ready function will solve this..as that way js will call the code only after document loaded.. — Rajat Singhal, Feb 08 '12 at 16:33
@RajatSinghal: thats not gonna work since you have to recompute each time event happens — Benny Tjia, Feb 08 '12 at 16:42
Did you try http://www.kryogenix.org/code/browser/sorttable/ or http://yoast.com/articles/sortable-table/ — mplungjan, Feb 08 '12 at 16:52
Have you tried looking at components like jqGrid which offer sorting and much more? — codemonkey, Feb 08 '12 at 16:33
Related superset question: http://stackoverflow.com/questions/10180391/javascript-how-to-avoid-blocking-the-browser-while-doing-heavy-work/ — apsillers, Sep 12 '12 at 12:54

score 1 · Answer 1 · answered Feb 08 '12 at 16:39

Your best bet is probably to use an existing HTML table/grid widget library which has presumably already solved this problem. No doubt many can be found by searching the web.

You could do the heavy-lifting (e.g. sorting) of items on the server via an Ajax request and simply replace the existing DOM table element with the one returned by the server sorting handler.

You could also probably write your own sort function which yields control back to the browser UI thread as appropriate (e.g. by decomposing the sort algorithm from its natural loop into a loop controlled by using setTimeout or setInterval).

> decomposing the sort algorithm Yes. This is the key, if you are in control of the sort algo, and not using a prebuilt framework. — bendecko, Jan 15 '15 at 12:10

score 1 · Answer 2 · answered Feb 08 '12 at 16:52

If sorting the table in your case is a really heavy operation, then I suggest do a server side sorting using AJAX, OR take a look at this new toy HTML 5 web worker. Browser is single-threaded, so the UI thread should be unresponsive because it is blocked everytime your code does some expensive operation on client-side that is not wrapped inside a nonblocking callback method.

The problem with web worker is that it isn't widely supported in all browser. but what it does is it outsource the expensive client side js computation to another background worker while UI thread remains responsive.

score 0 · Answer 3 · answered Feb 08 '12 at 16:34

One way to accomplish this is to do serverside sorting of the items using ajax.

<div id="tableContainer">
   <table>...</table>
</div>

$.ajax({
   url: "/sort"
   data: {items:items, sortField:"id"},
   dataType:"html",
   success: function(sortedTable){
      $("#tableContainer").html(sortedTable);
   }
}

score 0 · Answer 4 · answered Feb 08 '12 at 16:49

The browser 'freeze' is because of constantly redrawing the page- just re-draw it once.

You can display:none the table, sort it, and then display it again.

Or you can build a new sorted table offscreen and replace the existing table with the sorted version.

Is it possible to sort an HTML table without freezing the browser?

4 Answers4