我在对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>
这是我的采购。hp:
<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>
purchasesDB.php是一个JSON响应，除了排序之外，其他一切都很好，排序根本不起作用。我所看到的，潜在的问题是：
- 该表未分配"tablesorter"类
- 数据实际上并不在html中，只是在脚本中。这显示了当我观看index.php的页面源代码时，我所能看到的只是index.php代码本身和包含的脚本（但仅作为脚本，而不是生成的html）
我曾尝试将-标记直接放在索引页的HTML代码中，但这没有什么区别。
有人有主意吗？正如你所理解的，我对此还很陌生。
非常感谢！
Peter
将表添加到DOM后，需要初始化tablesorter插件。要执行此操作，请将$("#myTable").tablesorter();移动到innerHTML = out行之后。