What is the most efficient way to sort an HTML table via JavaScript?

Question

I'm writing some JS to sort an HTML table: the HTML table has a header row, clicking on the header of a column sorts the rows according to that column. My general algorithm is as follows:

Convert HTML into a JavaScript array.
Sort JavaScript array.
Reconvert JavaScript array to HTML table.

Right now, my code replaces all of the innerHTML elements of the table. Basically, after it sorts the JS array, it touches every node of the table, rewriting it's innerHTML value. I feel like there might be a more efficient way to do this, but I can't think of it.

EDIT:

Here's the code that does part (3) of the algorithm outlined above. I edited out the irrelevant parts (just some string transformations). The indices are a little weird because I skipped the header row when I converted the table to an array, so I'm compensating for that when rewriting the table.

for (var i = 0; i < numRows-1; i++){
 for (var j = 0; j < numCols; j++){
        var arrCell = tableArr[i][cols[j]];
        tableEl.rows[i+1].cells[j].innerHTML = arrCell;
    }
}

As long as you're generating the new markup in memory and then appending it with only 1 DOM operation, this should be pretty efficient. DOM modifications are far slower than Javascript array operations. — chrisfrancis27
– chrisfrancis27, Commented Aug 8, 2012 at 14:38
@Ghillied Yes. I mean, is there a more efficient way to do this outside of pure JS? Are you suggesting that I turn the header rows into links and re-GET the page from the server with the table sorted? — Son of the Wai-Pan
– Son of the Wai-Pan, Commented Aug 8, 2012 at 15:03
@ChrisFrancis For a table of n nodes I'm doing n DOM operations (i.e. I'm rewriting the innerHTML). — Son of the Wai-Pan
– Son of the Wai-Pan, Commented Aug 8, 2012 at 15:06
@Avery There isn't a more efficent way to do this other than pure JS. I gave you a way to do it with a library, but using libraries will load additional kilobytes into your page for nothing (since you will not use the other functions inside the library). — Jeff Noel
– Jeff Noel, Commented Aug 8, 2012 at 15:07

Nicholas · Accepted Answer · 2016-08-13 04:45:43Z

Use an array to sort the values and a document fragment to perform the update.

function sortRows(tbody, compare, sortDesc) {
    //convert html collection to array
    var rows = [].slice.call(tbody.rows);
    //sort to desired order
    rows.sort(compare);
    if (sortDesc) {
        rows.reverse();
    }
    //update table
    var fragment = document.createDocumentFragment();
    rows.forEach(function (row) {
        fragment.appendChild(row);
    });
    tbody.appendChild(fragment);
}

The complexity will be in the compare function. You will need to take into account the column index and any type conversions and caching you want.

This is a basic example that converts the cell text content to an integer.

function sortTable(table, columnIndex) {
    while (table && table.tagName !== 'TABLE') {
        table = table.parentNode;
    }
    if (table) {
        sortRows(table.tBodies[0], function compare(topRow, bottomRow) {
            var topValue = parseInt(topRow.cells[columnIndex].textContent, 10);
            var bottomValue = parseInt(bottomRow.cells[columnIndex].textContent, 10);
            return (topValue - bottomValue);
        });
    }
}

function sortRows(tbody, compare, sortDesc) {
    //convert html collection to array
    var rows = [].slice.call(tbody.rows);
    //sort to desired order
    rows.sort(compare);
    if (sortDesc) {
        rows.reverse();
    }
    //update table
    var fragment = document.createDocumentFragment();
    rows.forEach(function (row) {
        fragment.appendChild(row);
    });
    tbody.appendChild(fragment);
}

<table>
    <thead>
        <tr><th onclick="sortTable(this, 0)">Sort</th><th onclick="sortTable(this, 1)">Sort</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>25</td></tr>
        <tr><td>3</td><td>12</td></tr>
        <tr><td>2</td><td>40</td></tr>
        <tr><td>10</td><td>25</td></tr>
    </tbody>
</table>

If you need to work with IE8 then replace [].slice.call(), rows.forEach() and cell.textContent with cross browser methods/properties.

Nicholas · Accepted Answer · 2016-08-15 04:16:57Z

2

You could remove the rows from the DOM, do the sort, then add them back onto the DOM.

var tbody = table.tBodies[0];

var placeholder = document.createElement('tbody');
table.replaceChild(placeholder, tbody);

//sort rows in tbody

table.replaceChild(tbody, placeholder);

answered Aug 15, 2016 at 4:16

Nicholas

8568 silver badges17 bronze badges

1 Comment

Nicholas Over a year ago

I don't why this was down voted. It is faster to remove an element from the DOM, make a lot of changes to it (like moving elements by a sort) and then add it back into the DOM. This results in two page redraws instead of a page redraw for every time you move a row.

Jeff Noel · Accepted Answer · 2012-08-08 14:38:48Z

1

You can use jQuery and its Datatables plugin. In your datatable statement, you can add

"bSort": true

and the job will be done by the script. Although if you can find a pure JS way I suggest you use it so you don't add useless weight to your web page.

answered Aug 8, 2012 at 14:38

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Comments

tuxtimo · Accepted Answer · 2012-08-08 14:36:28Z

0

If the data is stored on the server - I would send an Ajax request to the server with the sorting type (ASC, DESC, etc. ), sort the data on the server (using PHP, etc) and then receive the sorted data in JavaScript and write the table completely new.

answered Aug 8, 2012 at 14:36

tuxtimo

2,79023 silver badges29 bronze badges

Collectives™ on Stack Overflow

What is the most efficient way to sort an HTML table via JavaScript?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related