对通过 jQuery 附加的 JSON 数据的 Jquery 表进行排序答案

【问题标题】：Sorting Jquery Table that JSON data appended via jQuery对通过 jQuery 附加的 JSON 数据的 Jquery 表进行排序
【发布时间】：2015-12-08 13:30:07
【问题描述】：

我想按以下顺序对要排序的表进行排序。我使用 JQuery 表来显示 JSON 数据。我尝试使用 tablesorter 插件，但未能配置它。有什么办法可以对这个表进行排序。提前致谢。

失败
中止
成功

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>

【问题讨论】：

您有 7 天的时间。你应该如何按状态排序 7 天？
哦！忘了提。我只想对最后一天 Day07 的列进行排序。

标签： javascript jquery html json

【解决方案1】：

只需使用自定义比较功能应用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>");
    }
});

【讨论】：

感谢 Yeldar 的快速回答，它拯救了我的一天。我正在考虑采用不同的表格格式，我可以对该列进行排序。还有一件事，我怎样才能对第 1 天第 07 列然后第 06 列然后第 05 列的数据顺序进行排序..
@ThilinaAkalanka 这会更难:) 你可以参考这个 SO 问题：stackoverflow.com/questions/2784230/… 和 stackoverflow.com/questions/6913512/…。
github.com/Teun/thenBy.js 这帮助我解决了这个问题。这是您的改进解决方案。再次感谢您的指导，非常感谢。