Javascript Tablesorter sort numbers as strings

Question

I generate a table out of a JSON with javascript and use the function sorttable() to sort my table.

The text sort works but the numbersort has the problem that the sorter think the numbers are strings.

How can i solve it that the sorter works for numbers ?

$( document ).ready(function() {
        var hotspots = "[{\"path\": \"src/main/java/tools/generator/data/RecordPart.java\",\"revisions\": 25,\"codeLines\": 18},{\"path\": \"src/main/java/tools/generator/data/RecordTotal.java\", \"revisions\": 55,\"codeLines\": 23},{\"path\": \"src/main/resources/test.xml\",\"revisions\": 102,\"codeLines\": 44},{\"path\": \"src/main/java/tools/generator/helper/MenuHelper.java\",\"revisions\": 4,\"codeLines\": 115}]"; 
        
        var jsonHotspots = JSON.parse(hotspots);

        constructTable(jsonHotspots);
    });

//Construct Table

function constructTable(json) {
        console.debug("Table : " + json); // this will show the info it in firebug console

        var tbl=$("<table/>").attr("id","mytable");
        $("#div1").append(tbl);

        var tr="<tr>";
        var td1='<td onclick="sortTable(0)" >Path</td>';
        var td2='<td onclick="sortTable(1)" >Revision</td>';
        var td3='<td onclick="sortTable(2)" >CodeLines</td></tr>';
        $("#mytable").append(tr+td1+td2+td3);

        for(var i=0;i < json.length ; i++)
        {
            var tr="<tr>";
            var td1="<td>"+json[i]["path"]+"</td>";
            var td2="<td>"+json[i]["revisions"]+"</td>";
            var td3="<td>"+json[i]["codeLines"]+"</td></tr>";

           $("#mytable").append(tr+td1+td2+td3);
        }
}



//TableSorter

function sortTable(n) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("mytable");
      switching = true;
      dir = "asc";
      while (switching) {
        switching = false;
        rows = table.getElementsByTagName("TR");
        for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount ++;
        } else {
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <pre id=mytable></pre>
</div>

Answer 1

Solution

Ok a simple if to look if is the row 0 or 1&2 and if it is 1 or 2 I convert the string to int and this works.

function sortTable(n) {
          var table, rows, switching, i, x, y,x1,y1, shouldSwitch, dir, switchcount = 0;
          table = document.getElementById("mytable");
          switching = true;
          dir = "asc";
          while (switching) {
            switching = false;
            rows = table.getElementsByTagName("TR");
            for (i = 1; i < (rows.length - 1); i++) {
              shouldSwitch = false;
                    if(n == 0) {
                        x = rows[i].getElementsByTagName("TD")[n];
                        y = rows[i + 1].getElementsByTagName("TD")[n];
                        if (dir == "asc") {
                            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                              shouldSwitch= true;
                              break;
                            }
                        } else if (dir == "desc") {
                            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                              shouldSwitch= true;
                              break;
                            }
                        }
                   }else{
                        x = rows[i].getElementsByTagName("TD")[n].innerHTML;
                        y = rows[i + 1].getElementsByTagName("TD")[n].innerHTML;
                        x1 = Number(x)
                        y1 = Number(y)
                        if (dir == "asc") {
                            if (x1 > y1) {
                              shouldSwitch= true;
                              break;
                            }
                        } else if (dir == "desc") {
                            if (x1 < y1) {
                              shouldSwitch= true;
                              break;
                            }
                        }
                   }
           }
            if (shouldSwitch) {
              rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
              switching = true;
              switchcount ++;
            } else {
              if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
              }
            }
          }
        }