jQuery tablesorter - loss of functionality after AJAX call

Question

I have recently been experimenting with the tablesorter plugin for jQuery. I have successfully got it up and running in once instance, and am very impressed. However, I have tried to apply the tablesorter to a different table, only to encounter some difficulties...

Basically the table causing a problem has a <ul> above it which acts as a set of tabs for the table. so if you click one of these tabs, an AJAX call is made and the table is repopulated with the rows relevant to the specific tab clicked. When the page initially loads (i.e. before a tab has been clicked) the tablesorter functionality works exactly as expected.

But when a tab is clicked and the table repopulated, the functionality disappears, rendering it without the sortable feature. Even if you go back to the original tab, after clicking another, the functionality does not return - the only way to do so is a physical refresh of the page in the browser.

I have seen a solution which seems similar to my problem on this site, and someone recommends using the jQuery plugin, livequery. I have tried this but to no avail :-(

If someone has any suggestions I would be most appreciative. I can post code snippets if it would help (though I know the instantiation code for tablesorter is fine as it works on tables with no tabs - so it's definitely not that!)

EDIT: As requested, here are some code snippets:
The table being sorted is <table id="#sortableTable#">..</table>, the instantiation code for tablesorter I am using is:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    {
        headers: //disable any headers not worthy of sorting!
        {
            0: { sorter: false },
            5: { sorter: false }
        },
        sortMultiSortKey: 'ctrlKey',
        debug:true,
        widgets: ['zebra']
    }); 
});

And I tried to rig up livequery as follows:

$("#sortableTable").livequery(function(){
   $(this).tablesorter();
});

This has not helped though... I am not sure whether I should use the id of the table with livequery as it is the click on the <ul> I should be responding to, which is of course not part of the table itself. I have tried a number of variations in the hope that one of them will help, but to no avail :-(

Answer 1

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.

Answer 2

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>[email protected]</td><td>$50.00</td>
    <td>http://www.jsmith.com&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Bach&lt;/td&gt;&lt;td&gt;Frank&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;
<td>$50.00</td><td>http://www.frank.com&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;";


 $(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>[email protected]</td> 
            <td>$100.00</td> 
            <td>http://www.jjones.com&lt;/td&gt; 
        </tr> 
        <tr> 
            <td>French</td> 
            <td>Guy</td> 
            <td>[email protected]</td> 
            <td>$50.00</td> 
            <td>http://www.french.com&lt;/td&gt; 
        </tr> 
        </tbody> 
        </table>

Answer 3

Turns out I had to make some modifications to the AJAX related code to re-call $("#myTable").tablesorter(..) after pulling any data...

Answer 4

I was having the same problem except I was loading a table that had a row for every 'category' then inserting the data for every category into the table using asynchronous calls. Calling $("#myTable").tablesorter(..) after each record was returned caused my browser to bomb when more than a trivial number of records were loaded.

My solution was to declare two variables, totalRecords and fetchedRecords. In the $(document).ready() I set the totalRecords to $("#recordRows").length; and every time I populate a record in the table, the fetchedRecords variable is incremented and if fetchedRecords >= totalRecords then I call $("#myTable").tableSorter(..).

Works quite well for me. Of course, your mileage may vary.

Answer 5

What modifications did you make Nick

Answer 6

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

Answer 7

Hi,

I have the same problem on my page. When I load the page with data, the tablesorter works great. But when I fill my table with a js call I've got an error in firebug:

parsers is undefined [Break on this error] return parsers[i].type;

Here is my code for lading data:

function show_modele_prices(id_societe, id_marque, id_modele){
        $.post("Controller", {ActionToExecute:"<%=IServletAdminActions.ADMIN_REF_VERSION_PRIX_ACTION%>",
            AjaxQuery:"<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_PRICES_LIST%>", <%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_SOCID%>:id_societe, 
            <%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_MODELID%>:id_modele,
            <%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_BRANDID%>:id_marque},
            function(msg) {

                //Insert HTML code in codeTabVers var
                        }
                    }

                }
                $("#<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_TAB_VERSION%> tbody").children().remove();
                $("#<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_TAB_VERSION%> tbody").append(codeTabVers);
            }, "json");//re-init les options
        displayRelativePrice(false);
        document.getElementById('AdminRefVersionPrixUpdateTypeSaisie_abs').checked = true;
        document.getElementById('AdminRefVersionPrixUpdateTypeSaisie_rel').checked = false;
        $("#td_msg_disp").text('');
        //MAJ des donnees du trieur.

        $("#<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_TAB_VERSION%>").trigger("update");
        var sorting = [[1,0]]; 
        $("#<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_TAB_VERSION%>").trigger("sorton",[sorting]);


    }

And Here my table:

<table width="100%" cellpadding="0" cellspacing="0" border="0" id="<%=IAjaxParameters.ADMIN_REF_VERSION_PRIX_TAB_VERSION%>" class="tablesorter">
                                            <thead>
                                                <tr>
                                                    <th class="{sorter: false}" id="col_chk"></th>
                                                    <th class="{sorter: 'string'}" id="col_version">Version</th>
                                                    <th class="{sorter: 'string'}" id="col_codedms">Code</th>   
                                                    <th class="{sorter: false}" id="col_pf">PF</th>
                                                    <th class="{sorter: false}" id="col_co2">CO²</th>
                                                    <th class="{sorter: 'number'}" id="col_pxttc">Actuel</th>
                                                    <th class="{sorter: false}" id="col_pxttc_saisie">Nouveau</th>
                                                    <th class="{sorter: 'number'}" id="col_pxht">Actuel</th>
                                                    <th class="{sorter: false}" id="col_pxht_saisie">Nouveau</th>
                                                    <th class="{sorter: false}" id="col_chk_actif">Active</th>                                                                          
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                            </table>

Thanks for your help.

ps: sorry for my bad english, I'm french.

Answer 8

RKitson, can you please share your complete solution? I am running into the exact same issue.

Thanks