[jQuery] problem with tablesorter and dynamic table content
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 like tablesorter never
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 }