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

Fiddle: http://jsfiddle.net/qNwDe/

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]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

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

Leave a Comment