CODEWITHSUNDEEP
jquerytablesorter
Ellipsis17
Ellipsis17

Reputation: 85

JQuery Tablesorter Not Sorting Ajax Data

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.

Upvotes: 0

Views: 3191

Answers (1)

Mottie
Mottie

Reputation: 86483

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

              }
          }
    });
});

Upvotes: 2

Related Questions