Demo
Note Make any row static or normal by toggling thestatic
class name using Ctrl + left click (⌘ + click on Mac)Single tbody
Move "Iguana" row:
Column 1 | Column 2 | Column 3 |
---|---|---|
D | 4 | Dog |
E | 5 | Emu |
F | 6 | Frog |
G | 7 | Goat |
A | 1 | Anteater |
B | 2 | Bear |
C | 3 | Cat |
H | 8 | Horse |
I | 9 | Iguana |
J | 10 | Jellyfish |
V | 22 | Vole |
W | 23 | Walrus |
X | 24 | Xantis |
K | 11 | Koala |
Column 1 | Column 2 | Column 3 |
L | 12 | Lemur |
Q | 17 | Quail |
R | 18 | Rhino |
S | 19 | Seal |
M | 13 | Mink |
N | 14 | Nightingale |
O | 15 | Octopus |
P | 16 | Pig |
T | 20 | Tiger |
U | 21 | Urchin |
Y | 25 | Yak |
Z | 26 | Zebra |
Total Count | Lots! |
Multiple tbody
Rank |
First Name |
Last Name |
Age |
Total |
Discount |
Date |
---|---|---|---|---|---|---|
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM |
11 | Aaron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM |
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM |
111 | Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
013 | Clark | Kent Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
Second tbody | ||||||
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM |
10 | Alex | Dumass | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM |
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM |
166 | Bruce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM |
55 | Dennis | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM |
9 | Martha | delFuego | 25 | $22.09 | 17% | Jun 11, 2011 10:55 AM |
Javascript
$(function() {
$('#alphimals, #table2').tablesorter({
theme: 'blue',
widgets: ['zebra', 'staticRow']
})
// (ctrl or mac command) + click to toggle static row
.find('tbody tr').click(function(event){
if (event.ctrlKey || event.metaKey) {
$(this)
.toggleClass('static')
.trigger('staticRowsRefresh');
}
});
$('.addrow').click(function(){
$('#alphimals tbody')
.append('<tr><td>AA</td><td>0</td><td>Aardvark</td></tr>')
.trigger('update');
});
// move row up or down
$('.move').click(function(){
var direction = $(this).hasClass('up'),
$rows = $('#alphimals tr'),
$ig = $rows.filter(':contains(Iguana)').addClass('static'),
len = $rows.length - 3, // subtract two because there are two other static rows
v = $ig.data('row-index');
v = direction ? --v : ++v;
v = v > len ? len : v <= 0 ? 0 : v;
$ig.data('row-index', v);
$rows.trigger('staticRowsRefresh');
});
});
CSS
#alphimals td {
text-align: center;
}
.tablesorter tbody tr.static td {
background-color: #999;
color: #fff;
}
HTML
<h3>Single tbody</h3>
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button></p><p>
</p><table id="alphimals" class="tablesorter">
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</thead>
<tbody>
<tr class="static" data-row-index="50%"><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>D</td><td>4</td><td>Dog</td></tr>
<tr><td>E</td><td>5</td><td>Emu</td></tr>
<tr><td>F</td><td>6</td><td>Frog</td></tr>
<tr><td>G</td><td>7</td><td>Goat</td></tr>
<tr><td>A</td><td>1</td><td>Anteater</td></tr>
<tr><td>B</td><td>2</td><td>Bear</td></tr>
<tr><td>C</td><td>3</td><td>Cat</td></tr>
<tr><td>H</td><td>8</td><td>Horse</td></tr>
<!-- index of next row set to one less because of static row above set to 50% -->
<tr class="static" data-row-index="8"><td>I</td><td>9</td><td>Iguana</td></tr>
<tr><td>J</td><td>10</td><td>Jellyfish</td></tr>
<tr><td>V</td><td>22</td><td>Vole</td></tr>
<tr><td>W</td><td>23</td><td>Walrus</td></tr>
<tr><td>X</td><td>24</td><td>Xantis</td></tr>
<tr><td>K</td><td>11</td><td>Koala</td></tr>
<tr><td>L</td><td>12</td><td>Lemur</td></tr>
<tr><td>Q</td><td>17</td><td>Quail</td></tr>
<tr><td>R</td><td>18</td><td>Rhino</td></tr>
<tr><td>S</td><td>19</td><td>Seal</td></tr>
<tr><td>M</td><td>13</td><td>Mink</td></tr>
<tr><td>N</td><td>14</td><td>Nightingale</td></tr>
<tr><td>O</td><td>15</td><td>Octopus</td></tr>
<tr><td>P</td><td>16</td><td>Pig</td></tr>
<tr><td>T</td><td>20</td><td>Tiger</td></tr>
<tr><td>U</td><td>21</td><td>Urchin</td></tr>
<tr><td>Y</td><td>25</td><td>Yak</td></tr>
<tr><td>Z</td><td>26</td><td>Zebra</td></tr>
<tr class="static" data-row-index="50"><td>Total Count</td><td>Lots!</td><td> </td></tr>
</tbody>
</table>
<h4>Multiple tbody</h4>
<table id="table2" class="tablesorter">
<thead>
<tr>
<th>Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
<tr class="static"><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr><th colspan="7">Second tbody</th></tr>
</tbody>
<tbody>
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
<tr class="static"><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
</tbody>
</table>