使用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表不能排序

回答

相關問題