tablesorter: refresh specific row after update

Question

i am using mottie's tablesorter plugin with a standard table with childrows child rows . the data is loaded from mysql and stored in an array. because it is a rather large table the additional data in the childrow is not generated on table load. for performance reasons only after hitting the toggle the additional data will be generated show up.

pseudo code:

// the html
<thead>
<tr>
  <th>Order #</th>
  <th>Customer</th>
  <th>PO</th>
  <th>Date</th>
  <th>Total</th>
</tr>

// the table sorter row, x is the increment var for iterating the array
"<tr><td>$data[x]['order']</td><td>$data[x]['customer']</td>...snip...</tr>"

// the toggle div, x = array increment var
$('.tablesorter').delegate('.toggle', 'click' ,function(){
var x = find...snip...attr('id');

var output = '<tr class="tablesorter-childRow">';
output += '<td><div id='+x+'><span class="editable" id="customer">'+$data[x]["customer"]+'</span></div></td>';
output += '</tr>';

$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle().html(output);
return false;
});

that's working pretty fine. in the additional data there are a few fields which are editable by jeditable , saving the modified values to both the mysql database and the array with the data for tablesorter.

after an edit jeditable displays the edited value in the additional data, but the parent row (tablesorter, containing the toggle) displays the old value. is there any possibility to refresh the edited row in tablesorter from the array without reloading the whole table ? so, if i edit the customer in the example, it should be displayed in the table row, too.

thank you very much !

edit: i tried things like $("#tstable").trigger("update");, but does not work

Answer 1

This part of the code is not working as you'd expect:

$(this).closest('tr')
    .nextUntil('tr:not(.tablesorter-childRow)')
    .find('td')
    .toggle()
    .html(output);

When the user clicks on the "toggle" element (I'm assuming it's a link <a class="toggle">...</a> somewhere in the parent row), that code looks for all child rows associated with the parent row containing the "toggle" link.

It then looks for all <td> 's within the child rows and shows or hides the cell.

Adding .html() to the end makes every <td> in the child rows get the html for a full row.

Since it sounds like there are no child rows in the table until the user clicks, what should happen is this:

$(this).closest('tr').after( output );

This adds the child row(s) after the parent row that was clicked. At this point you can trigger an "update" , but it really isn't necessary since ajax is being used and sorting & filtering is performed server-side.