javascript - Sort Table by click in header tag regardless of it is numeric, alphabetical or date

Question

I'm trying to sort my table by javascript(only javascriptpure, not library and not framework, only javascriptpure).

Each column sort by clicking in every header tag and currently the sort is alphabetical but I need the sort will be numeric or alphabetical or date regardless of it. The data is a Json that come from the other side and could have numeric or alphabetical or date column.

This is my sort code:

function sortMainTable(_num) {
  var table, rows, sw, i, x, y;
  table = document.getElementById("mainTable");
  sw = true;
  while (sw) {
    sw = false;
    rows = table.getElementsByTagName("tr");
    for (i = 1; i < (rows.length - 1); i++) {
      x = rows[i].getElementsByTagName("td")[_num];
      y = rows[i + 1].getElementsByTagName("td")[_num];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        sw = true;
        break;
      }
    }
  }
}

Example json:

places = [{
    "city": "Los Angeles",
    "country": "USA",
    "price:": "130.90",
    "date": "02/12/2015"
  },
  {
    "city": "Boston",
    "country": "USA",
    "price:": "11.40",
    "date": "10/04/2014",
  },
  {
    "city": "Chicago",
    "country": "USA",
    "price:": "320.40"
    "date": "06/05/2017",
  },
]

As I told above, I need the sort will be numeric or alphabetical or date regardless of it. (if the column is numeric, the table sort is order by numeric column, and if the column is alphabetical, the table sort is order by alphabetical column, if the column is date, the table sort is order by date column)

Any idea?

Thanks.

Answer 1

What you want is most likely a natural sort. Where you can sort on alphanumerics, "naturally". There are a myriad of options out there on npm that you can use as reference. The first hit on google is javascript-natural-sort. This should point you in the right direction.

Once you have that, I would bind an event handler to your table header, which passes along the column name you wish to .sort() on, then natural sort your places array based on that key, then rerender the table.