我已经看到了有关在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。我敢肯定这是可能的,但是我如何让表排序器做到这一点? >
答案 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: '#,###.#'
}
});
});