排序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數據

回答

相關問題