Stefanvds Stefanvds - 1 year ago 80
Javascript Question

Sort a table fast by its first column with Javascript or jQuery

I have a table which is dynamically populated from

The problem is that
does not care about its original order.

The table looks like this:

<table id="caltbl">
<tr> <th> </th> <th> Date </th> <th> hours </th> ... </tr>
<tr> <td class="sortnr">1</td> <td></td> ... </tr>
<tr> <td class="sortnr">3</td> <td></td> ... </tr>
<tr> <td class="sortnr">2</td> <td></td> ... </tr>
<tr> <td class="sortnr">4</td> <td></td> ... </tr>

The first of each row contains the number on which the table should be sorted.

I had this code to sort it:

var rows = $('#caltbl > tbody').children('tr').detach();

for (var counter = 1; counter<=rows.length; counter++) {
$(rows).each(function(index) {
if ($(this).find(".sortnr").text()==counter){
$('#caltbl > tbody:last').append($(this));

This works fine in Firefox but causes me a major headache in Internet Explorer because there are more than 500 items and it hangs. I could add a
but that would not fix the real problem. The sorting is slow. What is a faster way to sort this?

Instead of having to start from the
html, as I said it gets populated dynamically so I have an
which contains the html. 1 item per

Answer Source


I've written an efficient, cross-browser method to sort the rows in your table. Multiple JQuery selectors in double loops are causing serious performance issues (as you've noticed), hence I've get rid of JQuery.

An additional advantage of my function is that it doesn't mind missing index numbers. I'm currently referring to the first cell of each row, rather than getting the element by class name. If you want to refer by classname, I will alter my function:

function sortTable(){
    var tbl = document.getElementById("caltbl").tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
        return x[0] - y[0];
    for(var i=0, len=store.length; i<len; i++){
    store = null;

Call sortTable() whenever you want to sort the table.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download