简体   繁体   中英

How to sort date in column table in javascript?

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM