How to sort table by date column

Question

I have a table and I want to sort Date column ascending and descending.

I have tried the code below but its not working. Its work when sorting the numbers only.

function sortColumn() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("example");
        switching = true;
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[6];
                y = rows[i + 1].getElementsByTagName("TD")[6];
                if (parseInt(x.innerHTML.toLowerCase()) > parseInt(y.innerHTML.toLowerCase())) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }

Answer 1

Here is a more complex example than you might have been looking for. It makes use of the Array Sort function, which can make use of an optional compareFunction to perform the sort comparison.

 $(function() { function tableToArray(tObj) { var result = []; var keys = []; $("thead th", tObj).each(function(i, el) { keys.push($(el).text().trim()); }); $("tbody tr").each(function(i, row) { var temp = {}; $.each(keys, function(j, k) { temp[k] = $("td", row).eq(j).text().trim(); }); result.push(temp); }); return result; } function replaceTableData(tObj, data) { var b = $("tbody", tObj); b.html(""); $.each(data, function(i, row) { var r = $("<tr>").appendTo(b); $.each(row, function(j, cell) { $("<td>").html(cell).appendTo(r); }); }); } function compare(a, b) { var dateA = a.Date; var dateB = b.Date; var result = 0; if (dateA > dateB) { result = 1; } else { result = -1; } return result; } function sortTable() { var tData = tableToArray($("table")); tData.sort(compare); replaceTableData($("table"), tData); } $(".sort-column").click(sortTable); });

 .sort-column { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>ID</th> <th class="sort-column" data-sort-order="null">Date</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>17/12/1989</td> <td>Homer</td> </tr> <tr> <td>2</td> <td>07/09/2019</td> <td>Marge</td> </tr> <tr> <td>3</td> <td>01/09/2019</td> <td>Bart</td> </tr> <tr> <td>4</td> <td>04/09/2019</td> <td>Lisa</td> </tr> <tr> <td>5</td> <td>14/09/2019</td> <td>Maggie</td> </tr> </tbody> </table>

This sorts based on the text in the Date column. You could get more complex and parse the Date into a Date Object when you compare. But with this date format, it's not really needed.

Update

Moved code into function so it can be called in a Click event. This is a really simple example and if you need more complex actions, consider how that might work or DataTables.