对JSON数据通过Jquery附加的Jquery表进行排序
Sorting Jquery Table that JSON data appended via jQuery
我想按以下顺序对要排序的表进行排序。我使用JQuery表来显示JSON数据。我试着使用表分类器插件,但配置失败。有什么方法可以对这个表进行排序吗。
- 失败
- 中止
- 成功
JSON数据
{
"Product":"APIM",
"Day01":"Success",
"Day02":"Aborted",
"Day03":"Failed",
"Day04":"Failed",
"Day05":"Failed",
"Day06":"Failed",
"Day07":"Success"
},
{
"Product":"AppFactory",
"Day01":"Aborted",
"Day02":"Success",
"Day03":"Success",
"Day04":"Success",
"Day05":"Success",
"Day06":"Success",
"Day07":"Success"
},
附加数据(dataBind.js)
$.post("/portal/controllers/apis/test.jag", {
action: "getData"
}, function(data) {
var result = JSON.parse(data);
console.log("----------------------------------start----------------------------");
var Day = result[result.length - 1].Days;
$("#tableid").append("<thead><tr><th> Product </th> <th >" + Day[0].substring(5, 11) + "</th> <th>" + Day[1].substring(5, 11) + "</th> <th>" + Day[2].substring(5, 11) + "</th><th>" + Day[3].substring(5, 11) + "</th><th>" + Day[4].substring(5, 11) + "</th><th>" + Day[5].substring(5, 11) + "</th><th> Current </th><th> Failed Components </th><th> Failed Duration </th></tr></thead>");
for (var i = 0; i < result.length; i++) {
$("#tableid").append("<tbody><tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td>" + result[i].Failed.Component + "</td><td>" + result[i].Failed.Duration + "</td></tr></tbody>");
}
console.log("----------------------------------End Table----------------------------");
});
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Build Data Table</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/dataBind.js"></script>
</head>
<body style="height: 1100px;">
<div class="CSSTableGenerator" >
<table id = "tableid">
</table>
</div>
</body>
</html>
只需应用带有自定义比较函数的Array.prototype.sort
:
var sortOrder = ['Failed', 'Aborted', 'Success']; // <--- Look here
$.post("/portal/controllers/apis/test.jag", {
action: "getData"
}, function(data) {
var result = JSON.parse(data);
var Day = result[result.length - 1].Days;
/* Look here: */
result = result.sort(function(a, b) {
return sortOrder.indexOf(a.Day07) - sortOrder.indexOf(b.Day07);
});
/* ---------- */
$("#tableid").append("<thead><tr><th> Product </th> <th >" + Day[0].substring(5, 11) + "</th> <th>" + Day[1].substring(5, 11) + "</th> <th>" + Day[2].substring(5, 11) + "</th><th>" + Day[3].substring(5, 11) + "</th><th>" + Day[4].substring(5, 11) + "</th><th>" + Day[5].substring(5, 11) + "</th><th> Current </th><th> Failed Components </th><th> Failed Duration </th></tr></thead>");
for (var i = 0; i < result.length; i++) {
$("#tableid").append("<tbody><tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td>" + result[i].Failed.Component + "</td><td>" + result[i].Failed.Duration + "</td></tr></tbody>");
}
});
相关文章:
- 插入按字母顺序、javascript或jquery排序的新列表
- jQuery - 排序后更新可排序列表
- jQuery排序验证
- jQuery排序和appendTo在Internet Explorer和Safari中不起作用
- jQuery排序输入
- jQuery排序失败
- Jquery排序结果不一致
- jQuery排序元素,移除、分离、克隆、附加内存泄漏
- Jquery排序功能不工作
- jQuery排序功能不能正常工作
- 使用jquery排序元素
- 让backbone.js视图知道jQuery排序表中的更新
- jQuery排序
- 更新绑定与jQuery排序
- 如何通过使用Javascript或JQuery排序第一个数组来排序第二个数组
- 使用jQuery排序JSON对象
- 使用JQuery排序插入
- JQuery排序和过滤列表
- 如何使jQuery排序工作与更多的字符
- 使用jquery排序与CSS转换/过渡