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

我已经看到了有关在tablesorter中对行进行分组的类似问题，但它们提出的问题与我想要的略有不同。我希望单个表具有两组分别进行排序的行。例如：

| 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。我确定这是可能的，但是如何使tablesorter做到这一点？

最佳答案

使用我的fork of tablesorter，您可以添加多个tbo实体，并且每个将与其他实体分开排序。至于total和extra标头，也将它们添加到单独的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，其中包括math小部件，可以自动为您计算行总数。唯一需要的更改是在总计行中：

<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: '#,###.#'
    }
  });
});

关于javascript - 如何使用tablesorter分别对多组行进行排序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56895295/