tablesorter：更新后刷新特定行答案

【问题标题】：tablesorter: refresh specific row after updatetablesorter：更新后刷新特定行
【发布时间】：2015-08-31 14:54:09
【问题描述】：

我正在使用 mottie 的 tablesorter 插件和带有子行 child rows 的标准表。数据从mysql加载并存储在数组中。因为它是一个相当大的表，所以子行中的附加数据不会在表加载时生成。出于性能原因，仅在点击切换后才会显示生成的附加数据。

伪代码：

// 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;
});

这工作得很好。在附加数据中，有几个字段可由jeditable 编辑，将修改后的值保存到mysql 数据库和带有tablesorter 数据的数组。

编辑后 jeditable 在附加数据中显示编辑后的值，但父行（tablesorter，包含切换）显示旧值。是否有可能在不重新加载整个表的情况下从数组中刷新 tablesorter 中已编辑的行？因此，如果我在示例中编辑客户，它也应该显示在表格行中。

非常感谢！

编辑：我尝试了 $("#tstable").trigger("update"); 之类的东西，但不起作用

【问题讨论】：

标签： jquery tablesorter

【解决方案1】：

这部分代码没有像你期望的那样工作：

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

当用户单击“toggle”元素时（我假设它是父行某处的链接<a class="toggle">...</a>），该代码会查找与包含“toggle”链接的父行关联的所有子行。

然后它会在子行中查找所有<td>，并显示或隐藏单元格。

将.html() 添加到末尾会使子行中的每个<td> 获得整行的html。

由于在用户单击之前，表中似乎没有子行，所以应该是这样的：

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

这会在单击的父行之后添加子行。此时您可以触发"update"，但实际上没有必要，因为正在使用 ajax 并且排序和过滤是在服务器端执行的。

【讨论】：