JQuery Tablesorter 不排序 Ajax 数据答案

【问题标题】：JQuery Tablesorter Not Sorting Ajax DataJQuery Tablesorter 不排序 Ajax 数据
【发布时间】：2014-03-24 05:13:26
【问题描述】：

我可以让 Tablesorter 处理静态数据，但根本不能处理 Ajax 数据。我正在使用jquery.tablesorter.js（2.0.5b 版）和jquery-1.7.2.min.js。浏览器是在 Fedora 上运行的 Firefox 27.0.1。 这是我的代码：

<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script src="js/tablesorter-master/js/jquery.tablesorter.js"></script>
</head>

<body>
<h3>Tags Table</h3>
<table id="tagsTable"> 
<thead>
<tr>
<th>tagname</th> 
<th>tagdesc</th>
<th>wtime</th>
</tr>
</thead> 
<tbody>
<tr><td>Empty Cell</td><td>Empty Cell</td><td>Empty Cell</td></tr>
</tbody> 
</table>
<script>
$(document).ready(function() 
{ 
    $("#tagsTable").tablesorter({sortList: [[0,0],[1,0]]});

    $.ajax({
          type: "GET",
          url: "http://localhost:8001/tags?uid=123",
          success: function(data) 
          { 
            $.each(data, function(key, value) 
            {   
                $.each(value, function(index, arVal) 
                {
                    $("tbody").append("<tr>");   
                    $("tbody").append("<td>" + arVal['tagname'] + "</td>");
                    $("tbody").append("<td>" + arVal['tagdesc'] + "</td>");
                    $("tbody").append("<td>" + arVal['wtime'] + "</td>");
                    $("tbody").append("</tr>"); 
                });
            });
          },
          error: function(xhr, status, error) {
              console.log('error status = ' + status); 

              if(xhr.status==404)
              { 

              }  
          }
    });

    $("thead").click(function() {
        $("#tagsTable").tablesorter({sortList: [[0,0],[1,0]]});
        alert("thead has been clicked!");
    });

});  
</script>
</body>
</html>

正确的数据被拉入页面。

当我单击表头时，会激活警报，但不会进行排序。

我研究了一些关于 SO 的类似问题，其中一些解决方案仍在我的代码中。然而，问题并没有得到解决。

【问题讨论】：

我认为这是原始 tablesorter (v2.0.5) 的问题。试试我的fork of tablesorter，它有很多错误修复和增强功能。
谢谢，我已经添加了较新的版本。还更新了上面的代码以指示其当前状态。提到的错误消失了，但它仍然没有做任何事情。任何关于尝试或学习的建议都非常感谢！

标签： jquery tablesorter

【解决方案1】：

在您进行编辑之前，表格“更新”触发器已正确完成，但现在它不包含在上面的代码中。试试这个：

$(document).ready(function() 
{
    var $table = $("#tagsTable").tablesorter({sortList: [[0,0],[1,0]]}),
        $tbody = $table.children("tbody");

    $.ajax({
          type: "GET",
          url: "http://localhost:8001/tags?uid=123",
          success: function(data)
          {
            $.each(data, function(key, value)
            {
                $.each(value, function(index, arVal)
                {
                    $tbody.append(
                        "<tr>" +
                        "<td>" + arVal['tagname'] + "</td>" +
                        "<td>" + arVal['tagdesc'] + "</td>" +
                        "<td>" + arVal['wtime'] + "</td>" +
                        "</tr>"
                    );
                });
            });
            var resort = true,
                callback = function(){ console.log('table updated'); };
            $table.trigger("update", [ resort, callback ]);
          },
          error: function(xhr, status, error) {
              console.log('error status = ' + status);

              if(xhr.status==404)
              {

              }
          }
    });
});

【讨论】：

你从哪里获得“url:”localhost:8001/tags?uid=123", 值？他们的文档有点缺乏。