jQuery tablesorter 问题 - 使用 rowspan 排序

Question

我正在使用jQuery tablesorter在我的 table 上。如果没有 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

Answer 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 分支 ( demo ) - 分支中的类名称已更改

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

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