Demo
Name | A-head | B-head | C-head |
---|---|---|---|
Name | A-foot | B-foot | C-foot |
This row is within the first tbody set as an info block - it is not sorted! | |||
DDD | r1c1 | r1c2 | r1c3 |
AAA | r2c1 | r2c2 | r2c3 |
CCC | r3c1 | r3c2 | r3c3 |
BBB | r4c1 | r4c2 | r4c3 |
summary info for the first group | |||
Another row referring to the first group | |||
Zorro | r5c1 | r5c2 | r5c3 |
Caleb | r6c1 | r6c2 | r6c3 |
Momo | r7c1 | r7c2 | r7c3 |
Wolfie | r8c1 | r8c2 | r8c3 |
summary info for the second group | |||
Ulysses | r9c1 | r9c2 | r9c3 |
Penelope | r10c1 | r10c2 | r10c3 |
Edvald | r11c1 | r11c2 | r11c3 |
Jan | r12c1 | r12c2 | r12c3 |
summary info for the last group |
Javascript
$(function() {
$("table").tablesorter({
theme : 'blue',
cssInfoBlock : "tablesorter-no-sort",
widgets: [ 'zebra', 'stickyHeaders' ]
});
});
HTML
<table class="sortable">
<thead>
<tr><th>Name</th><th>A-head</th><th>B-head</th><th>C-head</th></tr>
</thead>
<tfoot>
<tr><th>Name</th><th>A-foot</th><th>B-foot</th><th>C-foot</th></tr>
</tfoot>
<!-- add "tablesorter-no-sort" class (changed by cssInfoBlock option) to skip sorting of this tbody -->
<tbody class="tablesorter-no-sort">
<tr><th colspan="4">This row is within the first tbody set as an info block - it is not sorted!</th></tr>
</tbody>
<tbody>
<tr><td>DDD</td><td>r1c1</td><td>r1c2</td><td>r1c3</td></tr>
<tr><td>AAA</td><td>r2c1</td><td>r2c2</td><td>r2c3</td></tr>
<tr><td>CCC</td><td>r3c1</td><td>r3c2</td><td>r3c3</td></tr>
<tr><td>BBB</td><td>r4c1</td><td>r4c2</td><td>r4c3</td></tr>
</tbody>
<tbody class="tablesorter-no-sort">
<tr><th colspan="4">summary info for the first group</th></tr>
<tr><th colspan="4">Another row referring to the first group</th></tr>
</tbody>
<tbody>
<tr><td>Zorro</td><td>r5c1</td><td>r5c2</td><td>r5c3</td></tr>
<tr><td>Caleb</td><td>r6c1</td><td>r6c2</td><td>r6c3</td></tr>
<tr><td>Momo</td><td>r7c1</td><td>r7c2</td><td>r7c3</td></tr>
<tr><td>Wolfie</td><td>r8c1</td><td>r8c2</td><td>r8c3</td></tr>
</tbody>
<tbody class="tablesorter-no-sort">
<tr><th colspan="4">summary info for the second group</th></tr>
</tbody>
<tbody>
<tr><td>Ulysses</td><td>r9c1</td><td>r9c2</td><td>r9c3</td></tr>
<tr><td>Penelope</td><td>r10c1</td><td>r10c2</td><td>r10c3</td></tr>
<tr><td>Edvald</td><td>r11c1</td><td>r11c2</td><td>r11c3</td></tr>
<tr><td>Jan</td><td>r12c1</td><td>r12c2</td><td>r12c3</td></tr>
</tbody>
<tbody class="tablesorter-no-sort">
<tr><th colspan="4">summary info for the last group</th></tr>
</tbody>
</table>