Table排序器未排序 AJAX Table

Question

我正在使用 AJAX 从 CSV 文件构建 table。 table 看起来不错。但无论我尝试什么，我都无法让 tablesorter 使其成为 sortable。我已经尝试了在 Whosebug 上可以找到的几乎所有解决方案。有什么建议吗？

代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/themes/blue/style.css">
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/docs/css/jq.css">
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "MovieList.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });

});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(",");
    var lines = [];
var thelist
var columns = [];
//thelist = "<thead><tr>"
//for (i in headers) {
//headers[i] = headers[i].replace(/"/g,"")
//thelist += "<th>"+headers[i]+"</th>"
//}
//thelist += "</tr></thead><tbody>"
for (i in allTextLines) {
thelist +="<tr>"
columns = allTextLines[i].split(",")
if (i > 0) {
for (i in columns) {
columns[i] = columns[i].replace(/"/g,"")
thelist += "<td>"
thelist += columns[i]
thelist += "</td>"
} }
thelist += "</tr>"
} 
//thelist += "</tbody>"


$("#test").append(thelist);

};   

$(document).ready(function() {
$("#myTable").tablesorter();
});

Answer 1

你的代码有很多问题，但你的方向是正确的。

1：你少了很多分号。有太多需要指出的，但请检查 plunker。

2：在包含 Tablesorter 之前需要包含 jQuery，因为 Tablesorter 依赖于 jQuery.

3：要在 table 上使用 Tablesorter，table 必须有 <thead> 和 <tbody>。我可以看到您已经注释掉了将其添加到 table 的代码，但您确实需要它。 docs 没有很好地突出它，但它在 "Getting Started".

之下

4：AJAX 调用是异步的，这意味着您的代码不一定运行顺序。处理完数据后，您应该在 AJAX 调用中初始化 Tablesorter。

$.ajax({
    type: "GET",
    url: "MovieList.csv",
    dataType: "text",
    success: function (data) {
        processData(data);
        $("#myTable").tablesorter();
    }
});

5：当您向 tbody 添加行时，您会在 i === 0 时在开头添加一个额外的行。将此代码 thelist += "<tr>"; 移到循环和 if 语句中。

for (var i in allTextLines) {
    var columns = allTextLines[i].split(",");
    if (i > 0) {
        thelist += "<tr>";
        for (var j in columns) {
            thelist += "<td>";
            thelist += columns[j];
            thelist += "</td>";
        }
    }
    thelist += "</tr>";
}

6：您正在将行附加到名为“#test”的 table，但在“#myTable”上初始化 Tablesorter。

Plunker

Table排序器未排序 AJAX Table

Tablesorter Not Sorting AJAX Table

ajax

jquery

tablesorter