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

希望这有帮助！

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

1 个答案: