JQuery Tablesorter Not Sorting Ajax Data

StackOverflow https://stackoverflow.com/questions/22595128

  •  19-06-2023
  •  | 
  •  

题

I can get Tablesorter to work with static data, but not at all with Ajax data. I am using jquery.tablesorter.js (version 2.0.5b) with jquery-1.7.2.min.js. The browser is Firefox 27.0.1 running on Fedora. Here is my code: 

<!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>

The correct data is being pulled into the page.

When I click on a table header, the alert is activated, but no sorting occurs.

I have studied a few similar issues on SO, and some of those resolutions are still in my code. However, the problem has not been resolved.

有帮助吗？

解决方案

Before your edit, the table "update" trigger was done properly, but now it is not included in the code above. Try this:

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

              }
          }
    });
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top