使用 jQuery 表排序器生成的 JSON/Ajax 表不可排序答案

【问题标题】：JSON/Ajax generated table with jQuery tablesorter is not sortable使用 jQuery 表排序器生成的 JSON/Ajax 表不可排序
【发布时间】：2015-06-12 00:26:54
【问题描述】：

我在对 JSON/Ajax 生成的表进行排序时遇到问题。我使用的表格排序器是这样的：https://github.com/Mottie/tablesorter，当我直接在 HTML 中创建表格和内容时，它可以正常工作。

这是我的 index.php 上的代码：

<html>

<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-2.1.3.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="tablesorter master/js/jquery.tablesorter.js"></script> 
</head>

<body>
include 'purchases.php';
<div id='id01'></div>

<script type="text/javascript" language="javascript">
//$(document).ready(function() { 
    //call the tablesorter plugin 
    $("#myTable").tablesorter();
    $("#myTable").trigger("update");
    } 
); 
</script> 


</body>
</html>

这是我的购买.php：

<script>

var xmlhttp = new XMLHttpRequest();
var url = "purchasesDB.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    document.getElementById("id01").innerHTML = "";

    var arr = JSON.parse(response);
    var i;
    var out = "<table cellspacing='1' class='sortable' id='myTable'><thead><tr><th>Company</th><th>Amount</th><th>Margin</th><th>Date</th><th>Date 2</th><th>Customer</th><th>Transaction phase</th></tr></thead><tbody>";

    for(i = 0; i < arr.length; i++) {   
    var aTT = arr[i].Id;

  out += "<tr><td><a href='index.php?purch=" + aTT + "&p=Purchased'>" +     

       arr[i].Company + 
        "</a></td><td>" +
         arr[i].Amount +
        "</td><td>" +
         arr[i].Margin +
        "</td><td>" +
         arr[i].Date +
        "</td><td>" +
         arr[i].Date2 +
        "</td><td>" +
         arr[i].Customer +
        "</td><td>" +
        arr[i].TransactionPhase +
        "</td></tr>";

    }
    out += "</tbody></table>";
        //out += "</tbody></table>";



    document.getElementById("id01").innerHTML = out;

}
</script>

purchasingDB.php 是一个 JSON 响应，除了排序之外一切正常，排序根本不起作用。我可以看到，潜在的问题是：

该表未分配“tablesorter”类。
数据实际上并不在 html 中，只有在脚本中。这表明当我查看 index.php 的页面源时，我只能看到 index.php 代码本身和包含的脚本（但仅作为脚本，而不是生成的 html）。

我曾尝试将 -tags 直接放在索引页面的 HTML 代码中，但这没有任何区别。

有人有想法吗？如您所知，我对此很陌生。

非常感谢！

彼得

【问题讨论】：

在table 添加到您的myfunction 中的DOM 后调用tablesorter
谢谢罗里！你能给我一个我应该如何做的代码示例吗？对不起，我缺乏知识。
您只需要在innerHTML = out 行之后添加更多$("#myTable").tablesorter();。
@RoryMcCrossan 工作完美！一百万谢谢你！
没问题，很高兴为您提供帮助。我已将其添加为您的答案。

标签： php jquery ajax json sorting

【解决方案1】：

您需要在表添加到 DOM 之后初始化 tablesorter 插件。为此，请将$("#myTable").tablesorter(); 移动到innerHTML = out 行之后。

【讨论】：