jQuery tablesorter - loss of functionality after AJAX call

Once you have appended your data, do this:

$("your-table").trigger("update"); var sorting = [[0,0]]; $("your-table").trigger("sorton",[sorting]);

This will let the plugin know it has had an update, and re-sort it.

The complete example given in the doc:

$(document).ready(function() {     $("table").tablesorter();     $("#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             $("table").trigger("update");             // set sorting column and direction, this will sort on the first and third column             var sorting = [[2,1],[0,0]];             // sort on the first column             $("table").trigger("sorton",[sorting]);         });         return false;     }); });

From the tablesorter doc here:http://tablesorter.com/docs/example-ajax.html

Have you tried calling

$("#myTable").tablesorter();

after the code where you handle the click on tab and repopulate the table??? If not, just give it a try.

It may be that as your second table is created with ajax that you need to rebind the events. You may want to use the LiveQuery plugin

http://docs.jquery.com/Plugins/livequery

which might "auto-magically" help with your problem.

edit: sorry, just reread your post and seen that you've tried that already.

Update.I've rigged up a quick test harness which hopefully will help. There are 3 LIs at the top each one has a different way of updating the table contents. The last one updates the contents and keeps the ordering

    <script src="jquery-1.3.js"  type="text/javascript" ></script>    <script src="jquery.livequery.js"  type="text/javascript" ></script>    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script><script>var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th><th>Email</th><th>Due</th><th>Web Site</th></tr></thead><tbody><tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td><td>$50.00</td>    <td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</td><td>$50.00</td><td>http://www.frank.com</td></tr></tbody>"; $(document).ready(function()     {         $("#addData").click(function(event){        $("#sortableTable").html(newTableContents);    });    $("#addLivequery").livequery("click", function(event){        $("#sortableTable").html(newTableContents);    });    $("#addLiveTable").livequery("click", function(event){        $("#sortableTable").html(newTableContents);        $("#sortableTable").tablesorter( { } );     });    $("#sortableTable").tablesorter( { } );   });</script>        <ul>            <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li>            <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li>            <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li>         </ul>        <hr />        <table id="sortableTable">         <thead>         <tr>             <th>Last Name</th>             <th>First Name</th>             <th>Email</th>             <th>Due</th>             <th>Web Site</th>         </tr>         </thead>         <tbody>         <tr>             <td>Jones</td>             <td>Joe</td>             <td>jjones@gmail.com</td>             <td>$100.00</td>             <td>http://www.jjones.com</td>         </tr>         <tr>             <td>French</td>             <td>Guy</td>             <td>gf@yahoo.com</td>             <td>$50.00</td>             <td>http://www.french.com</td>         </tr>         </tbody>         </table>