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