Demo

First Name
Last Name
Age
Total
Discount
Date
Peter Parker 28 $9.99 20% Jul 6, 2006 8:14 AM
John Hood 33 $19.99 25% Dec 10, 2002 5:14 AM
Clark Kent 18 $15.89 44% Jan 12, 2003 11:14 AM
Bruce Almighty 45 $153.19 44% Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% Jan 18, 2007 9:12 AM
Append new table data

NOTE! With the latest version of jQuery, this demo will only work when the ajax page is hosted online.

Javascript

$(function() {

  $("table").tablesorter({ theme : 'blue' });

  $("#ajax-append").click(function() {

    $.get("assets/ajax-content.html", function(html) {

      // append the "ajax'd" data to the table body
      $("table tbody").append(html);

      // let the plugin know that we made a update
      // the resort flag set to anything BUT false (no quotes) will trigger an automatic
      // table resort using the current sort
      var resort = true;
      $("table").trigger("update", [resort]);

      // triggering the "update" function will resort the table using the current sort; since version 2.0.14
      // use the following code to change the sort; set sorting column and direction, this will sort on the first and third column
      // var sorting = [[2,1],[0,0]];
      // $("table").trigger("sorton", [sorting]);
    });

    return false;
  });

});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

<a href="#" id="ajax-append">Append new table data</a>
Next up: Adding a table row ››