JQuery Tablesorter issue

Question

Hi,

I have this table where the is initially blank. Then when the document is ready I call a function that runs an AJAX query for the table content. The initial content is sorted awesomely! But when I call my function again with different parameters to get new content, things start to go wrong. The table fills with the new content just fine, but clicking on a header column to sort reverts the table content back to what it was when the page first loaded and the sorting also stops working.

This is the code snippet that I am using. will using $('.tablesorter').trigger("update") help? At what point should i make a call to this?

jQuery(".tablesorter > tbody").load(path, function(){

 jQuery(".tablesorter").tablesorter({
     onRenderHeader: function (){
     this.wrapInner("<span></span>");
    }
    , widthFixed: true
    , widgets: ['zebra','hovering','selected']
                , debug: true
              });

}

Thanks, MM

Answer 1

I believe you will need to use livequery to let tablesorter know about the new ajax content.

This one took me a while to wrap my head around, but basically this should work, after you include the livequery js:

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

Noah

Answer 2

Thanks, Noah