Table Sort

[smus]

Hi, I need your hint. I am using table sort from this w3schools example: https://www.w3schools.com/howto/howto_js_sort_table.asp

There is a table with 2 columns, the first contains text data, the second - numbers.

I want the second one to be sorted as integers, but it doesn't work when I convert a string to number like this:

if(n === 1){x = parseInt(x.innerHTML)} or number(x.innerHTML)

n is the column id starting from zero

[dsonesuk]

Depends? if looping through rows then columns, and retrieving value from that specific row and column.

[smus]

? It continues sorting the column with numbers as if it's text, despite the conversion (text to number)

[Ingolme]

You haven't shown your code.

You have to cast x.innerHTML and y.innerHTML to floats or ints before comparing.

[smus]

Here's the code:

<!-- the table header -->

<table class='indextable' align='center'><th  onclick='sortTable(this.parentNode.parentNode,0)'>Subject</th><th onclick='sortTable(this.parentNode.parentNode,1)'>Questions</th><th>Edit</th>

<!-- the javascript function -->

<script>

function sortTable(t,n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, intx, inty;
  table = t;//document.getElementsByClassName("indextable")[0];
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows.getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */

 
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }

</script>

 

[smus]

What I am doing is that I am only adding the condition. If it is the second row of the table (n==1), convert the x.innerHTML to an integer value using parseInt or Number.

It does not react onclick, but the first row keeps on sorting the values out.

[dsonesuk]

If you don't use code button <> above, it reads [ i ] (without spaces) as formatting code for italics making it disappear and changing the text following it italic.

[smus]

<!-- the table header -->

<table class='indextable' align='center'><th  onclick='sortTable(this.parentNode.parentNode,0)'>Subject</th><th onclick='sortTable(this.parentNode.parentNode,1)'>Questions</th><th>Edit</th>

<!-- the javascript function -->

<script>

function sortTable(t,n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, intx, inty;
  table = t;//document.getElementsByClassName("indextable")[0];
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows.getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */

 
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }

</script> 

 

[smus]

Solved it! I was unattentive to include the additional <span> tag inside <td></td> (for the styles).

It sorts normally without it, or with it if we use innerText instead of innerHTML