jQuery tablesorter 问题 - 使用 rowspan 进行排序答案

【问题标题】：jQuery tablesorter issue - sorting with rowspanjQuery tablesorter 问题 - 使用 rowspan 进行排序
【发布时间】：2018-10-03 07:53:31
【问题描述】：

我在我的桌子上使用jQuery tablesorter。没有rowspan，表格排序很好，但是当我添加rowspan时，排序会破坏我的表格布局。

下面是一些示例代码：

<table cellspacing="1" class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>28</td>
      <td rowspan="2" style="vertical-align:middle">AAA</td>
    </tr>
    <tr>
      <td>John</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>18</td>
      <td>BBB</td>
    </tr>

    <tr>
      <td>Bruce</td>
      <td>22</td>
      <td>CCC</td>
    </tr>
  </tbody>
</table>

$(".tablesorter").tablesorter({});

不点击排序，我的表格是这样的：

当我点击国家标题时，表格真的是乱码L

【问题讨论】：

我认为 tablesorter 不支持使用行跨度进行排序。 an open issue about it 假设这是您正在谈论的表格排序器。
如果不支持，是否有其他方法可以使用 rowspan 进行排序
也许stackoverflow.com/questions/12898951/… 可能会有所帮助
只是为了澄清两点。 1. 假设我们将“Peter”更改为“Alan”，并且我们按名字排序，您希望结果拆分前两行吗？ IE。答案是“Alan-28-AAA”、“Bruce-22-CCC”、“Clark-18-BBB”、“John-33-AAA”（所以国家/地区没有行跨度）？ 2. 您是否总是在相邻国家/地区折叠（无论排序字段如何），或在排序字段上（例如按年龄排序会创建年龄行跨度）？

标签： jquery html-table tablesorter

【解决方案1】：

一个“简单”的解决方案是将包含在rowspan 中的所有行都设为子行：

原始表格排序器 (demo)

<tr>
  <td>Peter</td>
  <td>28</td>
  <td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
  <td>John</td>
  <td>33</td>
</tr>

初始化 JS

$(function() {
  $('table').tablesorter();
});

Tablesorter fork (demo) - 在 fork 中更改了类名

<tr>
  <td>Peter</td>
  <td>28</td>
  <td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="tablesorter-childRow">
  <td>John</td>
  <td>33</td>
</tr>

初始化 JS

$(function() {
  $('table').tablesorter({
    theme: 'blue'
  });
});

由于rowspan被设置为子行，它们不会被包含在排序中，也不会与父行交换位置。

【讨论】：

嗨@Mottie，我没有看到使用你的方法进行任何排序。
嗨，Dejan，尝试设置debug 选项以进行故障排除。如果这没有帮助，请在演示中对您的代码提出一个新问题。