How to sort date in column table in javascript?

Question

Since I am a beginner, I don't know how to start sorting the date column. I have another column which is total price in my table. I managed to sort the price column since it only involves number only.

The codes I provided below is how I successfully sort price column.

//function to sort number
  function sortLowest() {
        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;
            }
        }
    }

Below are the html code

  <p id="rating">Filter by Price:
  <select id="myList" class='form-control' style="width: 100%">
  <option id="stylesheet1" value="low">Lowest-Highest</option>
  <option id="stylesheet2" value="high">Highest-Lowest</option>
  </select></p>

<script>
  document.getElementById("myList").onchange = function() {
        var sheet = document.getElementById("myList").value;
        if (sheet == "high") {
            sortHighest();
        } else {
            sortLowest();
        }
        return false
    };
</script>

Do you want to sort in brower with javascript ? Maybe its better to sort the data in your backend over Rest and update your table after the backend response — camen6ert
– camen6ert, Commented Sep 16, 2019 at 13:33
Take a look, jqueryscript.net/table/… stackoverflow.com/questions/29571613/… — 0xdw
– 0xdw, Commented Sep 16, 2019 at 13:42
don't develop a sort algorithm on your own. Instead use the sort function from array: link — camen6ert
– camen6ert, Commented Sep 16, 2019 at 14:05

GBouffard · Accepted Answer · 2019-09-16 16:33:40Z

1

It would definitely be easier with a sort method but I would assume that you need to use a similar logic as the one above. You're also dealing with dates so you need to convert your string/text to dates before sorting; meaning using Date.now() or new Date().

I guess you do get the rows with rows = table.rows; and that getElementsByTagName("TD")[7] gives you the date column (I'm using 7 as an example since you wrote 6 as the price in your description so please use whatever column index is correct to get the dates for your problem). If these assumptions are correct, you can re-order by doing something like this and using a similar logic as above for dates:

        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = new Date(rows[i].getElementsByTagName("TD")[7].innerHTML.split('/').reverse().join(', '));
                y = new Date(rows[i + 1].getElementsByTagName("TD")[7].innerHTML.split('/').reverse().join(', '));

                if (x > y) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }

nb: The reason why I re-ordered '16/09/2019' to be '2019, 09, 16' with .split('/').reverse().join(', ') is because something like new Date('16/09/2019') does not work as opposed to new Date('2019, 09, 16') which does.

Please let me know if this solution solves your issue or if you have any question.

answered Sep 16, 2019 at 16:33

GBouffard

1,0974 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mary Over a year ago

Thanks a lot, it works well. May I know other than join(',') can I used other symbols like join('.') as well?

GBouffard Over a year ago

Glad it did work :) Join accepts a string as argument and new Date would work with '.' instead of ',' so you can.

Mary Over a year ago

Good explanation there. You just save my day.

Mary Over a year ago

If I want to sort the date by month, how can I do that?

GBouffard Over a year ago

It's a different matter. You can sort by the middle number .split('/')[1] but you would not be able to use new Date for that

Collectives™ on Stack Overflow

How to sort date in column table in javascript?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related