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

时间:2019-07-05 00:28:24

标签: javascript jquery 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。我敢肯定这是可能的,但是我如何让表排序器做到这一点? >

1 个答案:

答案 0 :(得分:1)

使用我的fork of tablesorter,您可以添加多个主体,每个主体将与其他主体分开排序。至于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,其中包括数学小部件,可以自动为您计算行总数。唯一需要的更改是在总计行中:

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