如何用Tablesorter插件仅按每个tbody首行排序多tbody表格

1. 调整Tablesorter初始化配置 #

核心思路是让插件仅以每个<tbody>的第一行作为排序依据，同时完全忽略包含子表格的第二行，具体配置如下：

$('table').tablesorter({
  // 启用sortTbody插件，用于按tbody整体排序
  widgets: ['sortTbody'],
  widgetOptions: {
    // 指定每个tbody中用来判断排序的目标行（首行）
    sortTbody_targetRow: 'tbody tr:first-child',
    // 标记需要忽略的子表格行（每个tbody的第二行）
    sortTbody_ignoreRow: 'tbody tr:nth-child(2)'
  },
  // 额外确保子表格行不参与排序文本提取
  textExtraction: function(node) {
    const $row = $(node).closest('tr');
    // 子表格行返回空值，不参与排序计算
    if ($row.is('tbody tr:nth-child(2)')) {
      return '';
    }
    return $(node).text().trim();
  }
});

2. 动态生成表格的初始化时机 #

因为表格是JS动态生成的，必须等表格完全渲染完成后再初始化Tablesorter，避免插件找不到元素：

// 假设generateTable是你的表格生成函数，需传入回调确保渲染完成
generateTable(() => {
  // 在这里执行Tablesorter初始化
  $('table').tablesorter({ /* 上述配置 */ });
});

3. 隐藏行的兼容性处理 #

如果你的子表格行用自定义类隐藏（比如hidden-row），需要确保Tablesorter的隐藏类配置和它一致：

$('table').tablesorter({
  // 其他配置不变
  cssHidden: 'hidden-row' // 替换成你实际用的隐藏类名
});

测试后，排序时每个<tbody>会以其首行数据为依据整体排序，排序后每个<tbody>的结构（首行+隐藏子表格行）保持完整，子表格不会再干扰排序逻辑。

内容的提问来源于stack exchange，提问作者Marian Roca