current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 5 down vote favorite

The following is my own code to sort an HTML table with Javascript (without any external library like JQuery). I’ll be glad if experts in the field show me the shortcomings of my code along with the ways to make improvements.

<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=Windows-1252">
    <script type="text/javascript">
        var people, asc1 = 1,
            asc2 = 1,
            asc3 = 1;
        window.onload = function () {
            people = document.getElementById("people");
        }

        function sort_table(tbody, col, asc) {
            var rows = tbody.rows,
                rlen = rows.length,
                arr = new Array(),
                i, j, cells, clen;
            // fill the array with values from the table
            for (i = 0; i < rlen; i++) {
                cells = rows[i].cells;
                clen = cells.length;
                arr[i] = new Array();
                for (j = 0; j < clen; j++) {
                    arr[i][j] = cells[j].innerHTML;
                }
            }
            // sort the array by the specified column number (col) and order (asc)
            arr.sort(function (a, b) {
                return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
            });
            // replace existing rows with new rows created from the sorted array
            for (i = 0; i < rlen; i++) {
                rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
            }
        }
    </script>
    <style type="text/css">
        table {
            border-collapse: collapse;
            border: none;
        }
        th,
        td {
            border: 1px solid black;
            padding: 4px 16px;
            font-family: Times New Roman;
            font-size: 24px;
            text-align: left;
        }
        th {
            background-color: #C8C8C8;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th>
                <th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;">Surname</th>
                <th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;">Age</th>
            </tr>
        </thead>
        <tbody id="people">
            <tr>
                <td>Raja</td>
                <td>Dey</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Mamata</td>
                <td>Sharma</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Avijit</td>
                <td>Sharma</td>
                <td>21</td>
            </tr>
            <tr>
                <td>Sharanya</td>
                <td>Dutta</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Nabin</td>
                <td>Roy</td>
                <td>27</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

JSFiddle link.

share|improve this question
5  
Is the code otherwise working? If you're looking for just feedback, you should post to Code Review instead. –  Juhana Dec 17 '13 at 9:37
    
Why not use Jquery. You can use tablesorter plugin. tablesorter.com/docs/example-pager.html –  Anup Dec 17 '13 at 10:14
    
His code is working (it only had a misconfiguration on jsfiddle: jsfiddle ) and he is asking for performance tips. @Anup : (without any external library like JQuery) –  ProGM Dec 17 '13 at 10:20
add comment

migrated from stackoverflow.com Dec 17 '13 at 22:19

This question came from our site for professional and enthusiast programmers.

2 Answers

up vote 3 down vote accepted

To speed up the sorting you first have to find what is consuming time. In your case the slower part of your code is:

for(i = 0; i < rlen; i++){
    rows[i].innerHTML = "<td>"+arr[i].join("</td><td>")+"</td>";
}

The reason is that the DOM elaboration is time consuming for the browser.

Here's an updated version that minimizes the access to the DOM:

function sort_table(tbody, col, asc){
    var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
    // fill the array with values from the table
    for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < clen; j++){
        arr[i][j] = cells[j].innerHTML;
        }
    }
    // sort the array by the specified column number (col) and order (asc)
    arr.sort(function(a, b){
        return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
    });
    for(i = 0; i < rlen; i++){
        arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
}

Proof: http://jsperf.com/table-sorting-stack-overflow

share|improve this answer
add comment
up vote 1 down vote

Here is the pure JS for sorting table data. I used first column which holds numbers. You have to modify column index and condition statement as per your requirements. I hope that solves your problem...

    // Table data sorting starts....
    function sortData(){
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 

        for(var i = 0; i < rowData.length - 1; i++){
            for(var j = 0; j < rowData.length - (i + 1); j++{

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)){
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

HTML Table:

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

HTML Table: Sorted

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

Here is demo.

share|improve this answer
    
This whole answer is all jquery. Although I think it's great you answered, the OP was asking specifically for non jquery solutions. –  dreza Dec 21 '13 at 5:33
    
Here you go. Pure JS code for sorting HTML nodes. You can see the demo on given link. –  BwithLove Dec 22 '13 at 11:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.