JQuery tablesorter using ajax and dynamic thead and tbody sections

Question

I am attempting to add in some table sorting using the jquery tablesorter plugin to a Rally app using dojo, struggling with how to hook up the update callback for the tablesorter.

I have html that looks like this (thead and tbody are separated as they are being dynamically generated i.e. number of columns is not known in advance):

<table id='myTable' class='tablesorter'>
    <thead id='sort-head'></thead>
    <tbody id='sort-body'></tbody>
</table>

tablesorter init is here

<script type="text/javascript">
    function onLoad() {
        var appCustom = new ReleaseScopeChange();
        appCustom.display(dojo.body());
    }
    rally.addOnLoad(onLoad);
    $(document).ready(function(){$("#myTable").tablesorter();});      
</script>

Code updating the thead/tbody

dojo.byId("sort-head").innerHTML = headresults; 
dojo.byId("sort-body").innerHTML = bodyresults; 
$('#myTable').trigger("update");            

Now, the sorting never actually gets set up at all. If I add a static table I can get the sorting working perfectly, so I am assuming its related to timing between the ajax request and the update trigger.

I have looked through a lot of other answers on this and I'm really not sure what is missing.

Answer 1

If you are using the original tablesorter, it would be better to just remove, and replace the entire table instead of updating the thead & tbody html separately; then reinitialize tablesorter on the new table.

Or you could disable tablesorter, then reinitialize it.

If you are using my fork of tablesorter, use the updateAll method instead of update.

dojo.byId("sort-head").innerHTML = headresults; 
dojo.byId("sort-body").innerHTML = bodyresults; 
$('#myTable').trigger("updateAll");