I also ran across this issue with dynamically loaded tbody content. I came to the conclusion, after poring over the tablesorter source code, that the only solution is to rebuild the entire table with each dynamic reload. The idea was originally posted here:
http://groups.google.com/group/jquery-en/browse_thread/thread/32732eecb8570dc0/26afe765f4a12c7b?lnk=gst&q=tablesorter On Apr 3, 1:05 pm, Jonny Polite <[EMAIL PROTECTED]> wrote: > Hello, > > So I have this table where the <tbody> 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. > > As you can see below, I have some logic in there to call > the .trigger("update") any time the content is updated. It just > doesn't seem to be doing the trick. It's liketablesorternever > figures out that there is new content it should be sorting with. > > Has anyone ever encountered this? Is there a solution or have I > simply encountered a bug? I really hope someone has something I could > try. Below it the relevant code for your perusal. > > ------------------------------------------------------------ > The initial table looks like this: > ------------------------------------------------------------ > 314 <table id="issue_table" cellspacing="1"> > 315 <thead> > 316 <tr> > 317 <th>category</th> > 318 <th>name</th> > 319 <th>description</th> > 320 <th>active</th> > 321 <th>viewable</th> > 322 <th>end user viewable</th> > 323 <th>OST bucket</th> > 324 </tr> > 325 </thead> > 326 <tfoot> > 327 <tr> > 328 <td colspan="7"><input type="button" id="save_issues" > value="save changes" /></td> > 329 </tr> > 330 </tfoot> > 331 <tbody> > 332 </tbody> > 333 </table> > > ------------------------------------------------------------ > The bulk of the function work happens within the success section of > the AJAX call. The success part looks like this: > ------------------------------------------------------------ > 143 success: function(data) { > 144 var issue_data = eval( "("+data+")" ); > 145 > 146 var issue_table = $j("#issue_table"); > 147 > 148 // Clear out whatever's in the table body > 149 var tbody = $j("#issue_table tbody"); > 150 tbody.empty(); > 151 > 152 $j.each( issue_data, function() { > 153 var issue_string = "<tr style=\"background- > color:#EFF8FF\">"; > <snip> code that constructs an entire TR as a string</snip> > 167 > 168 tbody.append( issue_string ); > 169 }); > 170 > 171 // Sort the table > 172 if( update ) { > 173 issue_table.trigger("update"); > 174 var sorting = [[0,0]]; > 175 issue_table.trigger("sorton", [sorting]); > 176 } else { > 177 issue_table.tableSorter({ > 178 debug: true, > 179 sortColumn: 'name', > 180 sortClassAsc: 'issue_header_asc', > 181 sortClassDesc: 'issue_header_desc', > 182 headerClass: 'issue_header' > 183 }); > 184 } > 185 > 186 }
