使用jQuery tablesorter生成的JSON/Ajax表不能排序

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

这是我的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>

这是我purchases.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>

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

该表未分配类'tablesorter'。
数据不是真的在html中，只有脚本。这表明当我看index.php的页面源时，我可以看到的是index.php代码本身和包含的脚本（但只作为脚本，不生成html）。

我试图将-tags直接放在索引页上的HTML代码中，但这没什么区别。

有人有想法吗？正如你所理解的，我对此很新。

非常感谢！

彼得

来源

2015-04-07 Peter V

将'table'添加到您的'myfunction'中的DOM后调用'tablesorter' –

感谢Rory！你能给我一个我应该怎么做的代码示例吗？对不起，我缺乏知识。 –

您只需要在'innerHTML = out'行之后添加'$（“＃myTable”）。tablesorter（）;''。 –

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

来源

2015-04-07 13:00:12

使用jQuery tablesorter生成的JSON/Ajax表不能排序

回答

相关问题