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 行,如果是 1
或 2
,我将字符串转换为 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;
}
}
}
}
我用 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 行,如果是 1
或 2
,我将字符串转换为 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;
}
}
}
}