javascript - 如何在jquery中对动态生成的表进行排序

Question

我在一个网站上工作，当选择了某些选项时，该页面会在表格中显示数据。该页面通过将 AJAX 调用的 json 输出转换为 html 表输出来动态创建和显示表中的数据。单击后续表标题时，我需要根据字母顺序/日期方式/打开-关闭对表的各个列进行排序。

我的代码是这样的:-

if (json.d[0].length > 0){

    htmlTable += "<table class='table table-striped' id='myTable'>"+
    "<tr>"+
    "<th  style='background-color: #df820a;'>Customer</button></th>"+
    "<th style='background-color: #df820a;'>Survey date</th>"+
    "<th style='background-color: #df820a;'>Contact by</th>"+
    "<th style='background-color: #df820a;'>Assigned to</th>"+
    "<th style='background-color: #df820a;'>Status</th>"+
    "<th style='background-color: #df820a;'>Resolution</th>"+
    "<th style='background-color: #df820a;'>Coupon offered</th>"+
    "</tr>";

    for (var i = 0; i < json.d[0].length; i++) {
        htmlTable += "<tr>"+
        "<td>" + json.d[0][i].customerName1 + "</td>"+
        "<td>" + json.d[0][i].createdDt1 + "</td>"+
        "<td>" + json.d[0][i].customerContactBy1 + "</td>"+
        "<td>" + json.d[0][i].AssignedTo1 + "</td>"+
        "<td>" + json.d[0][i].alertStatus1 + "</td>"+
        "<td>" + json.d[0][i].resolution1 + "</td>"+
        "<td>" + json.d[0][i].couponOffered1 + "</td>"+;
        "</tr>";
    }
    htmlTable += "</table>";
    $('#AlertManagement').html(htmlTable);
}

有什么方法可以对这些动态生成的列进行排序？？？

Answer 1

我使用 Christian Bach 的 tablesorter 插件。它与 ajax 调用配合得很好。就这么简单:

$.post('script.php', formData, function(data){
    $("#myTable").html(data).tablesorter(); 
});

当然，我知道您使用的是 json，所以它会与此略有不同，但我想您知道这是怎么回事。

http://tablesorter.com/docs/#Demo

希望这对您有所帮助!