Javascript Tablesorter 将数字排序为字符串

Javascript Tablesorter sort numbers as strings

我用 javascript 从 JSON 生成一个 table 并使用函数 sorttable() 对我的 table.

文本排序有效,但数字排序存在排序器认为数字是字符串的问题。

如何解决排序器对数字有效的问题?

$( 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>

解决方案

好吧,一个简单的 if 来查看是第 0 行还是第 1&2 行,如果是 12,我将字符串转换为 int,这样就可以了。

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;
              }
            }
          }
        }