Question

我可以让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上研究了一些类似的问题，其中一些解决方案仍在我的代码中。但是，问题尚未解决。

Answer 1

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

$(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)
              {

              }
          }
    });
});

JQuery Tablesorter没有排序Ajax数据

1 个答案: