排序JQuery数据，通过jQuery附加JSON数据

我想按以下顺序排序表进行排序。我用JQuery表来显示JSON数据。我尝试使用tablesorter插件，我没有配置它。有什么办法来排序这个表。先谢谢了。排序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>

来源

2015-12-08 Thilina Akalanka

你有7天。你应该如何按照状态分类7天？ –

哦！忘了提及。我只想对最后一天的Day07列进行排序。 –

只是适用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>"); 
    } 
});

来源

2015-12-08 05:30:07

谢谢Yeldar快速回答它拯救了我的一天。我正在考虑采用不同的表格格式，我可以对该列进行排序。还有一件事，我怎么能排序第1 Day07列然后Day06列然后Day05的数据顺序.. –

@ThilinaAkalanka这将是非常难:)你可以参考这个SO问题：http://stackoverflow.com/questions/2784230/javascript-how-do-you-sort-an-array-on-multiple-columns和http://stackoverflow.com/questions/6913512/how-to-sort-an-array-of-objects-by - 多场。 –

https://github.com/Teun/thenBy.js这帮助我解决了这个问题。这是您的改进解决方案。再次感谢您的指导，非常感谢。 –

排序JQuery数据，通过jQuery附加JSON数据

回答

相关问题