如何使用 tablesorter 分别对多组行进行排序？

Question

我在 tablesorter 中看到过关于行分组的类似问题，但他们问的问题与我想要的略有不同。我希望单个 table 有两组分别排序的行。例如：

| col1 | col2 | col3  | <- this header never moves
|  A   |   1  |  1.5  |
|  J   |   3  |  2.7  | <- these three rows get sorted
|  X   |   2  |  1.2  |
|Totals|   6  |  5.4  | <- This totals the first group and never moves
| another header row  | <- this header never moves
|  B   |   5  |  5.0  |
|  L   |   3  |  8.2  | <- these three rows get sorted
|  N   |   7  |  3.3  |
|Totals|  15  | 16.5  | <- This totals the second group and never moves

这是按col1排序的。如果我点击 "col2"，前三行应该是 A、X、J，后三行应该是 L、B、N。我确信这是可能的，但我怎样才能得到 table分拣机来做？

Answer 1

使用我的 fork of tablesorter 您可以添加多个 tbodies，每个 tbodies 都将与其他 tbodies 分开排序。至于总数和额外的 header，也将它们添加到单独的 tbody 个元素中。

<table class="tablesorter">
  <thead>
    <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  </thead>
  <tbody><tr><!-- data --></tr></tbody>
  <tbody><tr><th>Totals</th><!-- ... --></tr></tbody>
  <tbody class="fake-header">
    <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  </tbody>
  <tbody><tr><!-- more data --></tr></tbody>
  <tbody><tr><th>Totals</th><!-- ... --></tr></tbody>
</table>

不需要额外的初始化：

$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra']
  });
});

我设置了 this demo，其中包括数学小部件，可以自动为您计算行总计。唯一需要更改的是总计行：

<tbody>
  <tr>
    <th>Totals</th>
    <th data-math="above-sum"></th>
    <th data-math="above-sum"></th>
  </tr>
</tbody>

并在初始化中包含小部件和输出掩码：

$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'math'],
    widgetOptions: {
      math_mask: '#,###.#'
    }
  });
});

如何使用 tablesorter 分别对多组行进行排序？

How can I use tablesorter to sort multiple groups of rows separately?

javascript

jquery

tablesorter