Notes

  • In v2.19.1, the staticRow_event option was added.

  • This widget will only work in tablesorter version 2.8+.
  • The widget was modified from Tablesorter-Static-Row-Plugin by ascii-soup (MIT license).
  • It has been updated to work in tables with multiple tbodies, but not within information-only tbodies.
  • This widget was not tested, nor was it meant to be used with the pager.
  • Note This demo was updated to allow toggling of static rows.

Options

Group widget default options (added inside of tablesorter widgetOptions)

TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDefaultDescription
staticRow_class ".static" Set a class name to use to lock a row in place, include a period.
staticRow_data "static-index" Set the jQuery data name to use with the row element. This data name saves the row index, and is only available as an option to avoid conflicts.
staticRow_event "staticRowsRefresh" Set the event that the widget listens for to perform a refresh.
"row-index" Use this data-attribute to set the desired static row location

Set the desired location using either of these two methods:
  • Use a zero-based index of the row
    <tr data-row-index="5">...</tr>
    Note setting this index to much more than the number of table rows ensures that it will stay at the bottom when adding new rows.

  • Use a percentage if total rows within it's tbody
    <tr data-row-index="50%">...</tr>
These values take priority over the actual row index, so as shown in the "Single tbody" demo below, the header row is set to 50%, but initially, it is located at the top of the table.

If these values are changed dynamically, the static row location can be updated

Methods / Events

Method

If adding or removing rows from the table, using any of the update methods will automatically refresh the static row indexes. Use the "Add Row" button below to test this.

To modify or refresh the static row indexing without updating, trigger a staticRowsRefresh event on the table:
var $row = $("tr:contains('Iguana')");
// move Iguana row down one (remember, this only works on static rows)
$row.data('row-index', $row.data('row-index') + 1);
$(table).trigger('staticRowsRefresh');
this allows moving a static row dynamically; try the Move "Ignuana" row buttons above the "Single tbody" demo.

Event

A staticRowsComplete event is triggered after the static rows widget has completed moving the static rows back into place. Use it as follows:
$(table).bind('staticRowsComplete', function(table) {
	console.log('static rows applied to ' + table.id);
});

Demo

Note Make any row static or normal by toggling the static class name using Ctrl + left click ( + click on Mac)

Single tbody

Move "Iguana" row:

Column 1Column 2Column 3
Column 1Column 2Column 3
D4Dog
E5Emu
F6Frog
G7Goat
A1Anteater
B2Bear
C3Cat
H8Horse
I9Iguana
J10Jellyfish
V22Vole
W23Walrus
X24Xantis
K11Koala
L12Lemur
Q17Quail
R18Rhino
S19Seal
M13Mink
N14Nightingale
O15Octopus
P16Pig
T20Tiger
U21Urchin
Y25Yak
Z26Zebra
Total CountLots! 

Multiple tbody

Rank First Name Last Name Age Total Discount Date
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AaronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterParker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKent Sr.18$15.8944%Jan 12, 2003 11:14 AM
Second tbody
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumass13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Bruce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennisBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM

Javascript


	

CSS


	

HTML