Author: Christian Bach
Version: 2.1+ (forked on github from version 2.0.5, changelog)
Licence: Dual licensed under MIT or GPL licenses.

Introduction
Demo
Getting started
Examples
Configuration
Widget & Pager Options (v2.1)
Methods
Events
Download
Compatibility
Support
Credits

Introduction

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

Multi-column sorting
Multi-tbody sorting - see the options table below
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
Extensibility via widget system
Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
Works with jQuery 1.9+ ($.browser.msie was removed; needed in the original version).
Small code size

Demo

Account #	First Name	Last Name	Age	Total	Discount	Difference	Date
A42b	Peter	Parker	28	$9.99	20.9%	+12.1	Jul 6, 2006 8:14 AM
A255	John	Hood	33	$19.99	25%	+12	Dec 10, 2002 5:14 AM
A33	Clark	Kent	18	$15.89	44%	-26	Jan 12, 2003 11:14 AM
A1	Bruce	Almighty	45	$153.19	44.7%	+77	Jan 18, 2001 9:12 AM
A102	Bruce	Evans	22	$13.19	11%	-100.9	Jan 18, 2007 9:12 AM
A42a	Bruce	Evans	22	$13.19	11%	0	Jan 18, 2007 9:12 AM

TIP! Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!

Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

<!-- choose a theme file -->
<link rel="stylesheet" href="/path/to/theme.default.css">
<!-- load jQuery and tablesorter scripts -->
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

Start by telling tablesorter to sort your table when the document is loaded:

$(function(){
  $("#myTable").tablesorter();
});

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(function(){
  $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
});

NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see Examples

Examples

These examples will show what's possible with tablesorter. You need Javascript enabled to run these samples, just like you and your users will need Javascript enabled to use tablesorter.

Basic

Advanced

Parsers / Extracting Content

Widgets / Plugins

Adding / Removing Content

Initializing tablesorter on a empty table
Appending table data with ajax
Adding a table row (v2.0.16)
Update an entire table column (thead and tbody) (v2.8).
Update the table after cell content has changed
Pager plugin - examples of how to add and remove rows

Change Header Style

UITheme widget (v2.0.9)
Modifying the Header during rendering.
Modifying the Header using a template (v2.7)

Other

Options & Events

Playgrounds & Other demos

tablesorter basic demo (includes widgets)
tablesorter basic demo using jQuery UI theme
tablesorter basic demo with pager plugin
tableSorter LESS theme; modify the colors dynamically in this LESS theme demo!
pager widget (basic & ajax demos) (v2.12).
Custom pager control script
External filters using Select2 plugin
Column reorder widget - not working 100% with sticky headers
Column sum widget - still needs LOTS of work!
Check out the home wiki page more demos!

Metadata - setting inline options

*Note* you can use class names (version 2.0.11+, demo), or jQuery data (version 2.3+, demo) instead of meta data
Set a initial sorting order using metadata.
Disable header using metadata
Setting column parser using metadata

Configuration

tablesorter has many options you can pass in at initialization to achieve different effects
TIP! Click on the link in the property column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

Property Type Default Description Link

cancelSelection Boolean true Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.

cssAsc

String

Additional CSS class applied to style the header with a ascending sort - v2.11.

Changed to empty string in v2.11, as the "tablesorter-headerAsc" class will always be added to a header cell with an ascending sort; this option now contains any additional class names to add. Previous default value changed v2.5.

Example from the blue theme:

.tablesorter-blue .tablesorter-headerAsc {
  background-color: #9fbfdf;
  background-image: url(black-asc.gif);
}

cssChildRow String "tablesorter-childRow" Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row. Previous default was "expand-child" (Changed in v2.4). Ex:1 2

This is an entirely new row, but attached to the row above while sorting
cssChildRow Example HTML:

<table width="100%" border="1">
  <thead>
    <tr>
      <th>Item #</th>
      <th>Name</th>
      <th>Available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12345</td>
      <td>Toy Car</td>
      <td>5</td>
    </tr>
    <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above row, and not sort separately -->
      <td colspan="3">
        It's a toy car!
      </td>
    </tr>
    <tr>
      <td>23456</td>
      <td>Toy Plane</td>
      <td>2</td>
    </tr>
    <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above row, and not sort separately -->
      <td colspan="3">
        It's a toy plane!
      </td>
    </tr>
    <tr class="tablesorter-childRow"> <!-- this row will remain attached to the above two rows, and not sort separately -->
      <td colspan="3">
        and it flies!
      </td>
    </tr>
  </tbody>
</table>

cssDesc

String

Additional CSS class applied to style the header with a descending sort - v2.11.

Changed to empty string in v2.11, as the "tablesorter-headerDesc" class will always be added to a header cell with a descending sort; this option now contains any additional class names to add. Previous default value changed v2.5.

Example from the blue theme:

.tablesorter-blue .tablesorter-headerDesc {
  background-color: #8cb3d9;
  background-image: url(black-desc.gif);
}

cssHeader

String

Additional CSS class applied to style the headers - v2.11

Changed to empty string in v2.11, as the "tablesorter-header" class will always be added to the table headers; this option now contains any additional class names to add.

Example from the blue theme:

.tablesorter-blue .tablesorter-header {
  background-color: #99bfe6;
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 20px 4px 4px;
  white-space: normal;
  cursor: pointer;
}

cssHeaderRow

String

Additional CSS class applied to style the header row - v2.11

Changed to empty string in v2.11, as the "tablesorter-headerRow" class will always be added to a table header row; this option now contains any additional class names to add.

This CSS style was added in v2.4, prior to that the row would get the same class as the header cells. This class was added to make it easier to determine what element was being targetted in the plugin.

cssIcon

String

"tablesorter-icon"

The CSS style used to style the header cell icon (modified v2.7).

As of v2.4, an <i> element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an <i> element to the headers, set the cssIcon option to an empty string.

In v2.7, the icon will only be added to the header if both the cssIcon option is set AND the headerTemplate option includes the icon tag ({icon}).

cssProcessing

String

Additional CSS class applied to style the header cell while it is being sorted or filtered - v2.11

Changed to empty string in v2.11, as the "tablesorter-processing" class will always be added to a table cells during processing; this option now contains any additional class names to add.

This class name is added to the header cell that is currently being sorted or filted. To prevent this class name from being added, set the showProcessing option to false (v2.4).

cssInfoBlock

String

"tablesorter-infoOnly"

All tbodies with this class name will not have its contents sorted. (v2.2).

With the addition of multiple tbody sorting in v2.2, you can now insert a non-sorting tbody within the table by adding this class to the tbody.

<tbody class="tablesorter-infoOnly">
  <tr>
    <th>The contents of this tbody</th>
  </tr>
  <tr>
    <td>will not be sorted</td>
  </tr>
</tbody>

As an example, I've split up this options table into three (3) tbodies. The first contains the active options, the second is the info block with a row that only contains the text "Deprecated Options", and the last tbody contains the deprecated options. Sort the table to see how each tbody sorts separately.

NOTE! The pager plugin will only be applied to the first tbody, as always. I may work on modifying this behavior in the future, if I can figure out the best implementation.

data Object, Array undefined Storage for processed table build widget data (array, object, string) (v2.11). Example

dateFormat

String

"mmddyyyy"

Set the date format. Here are the available options. (Modified v2.0.23).

"mmddyyyy" (default)
"ddmmyyyy"
"yyyymmdd"

In previous versions, this option was set as "us", "uk" or "dd/mm/yy". This option was modified to better fit needed date formats. It will only work with four digit years!

The sorter should be set to "shortDate" and the date format can be set in the "dateFormat" option or set for a specific columns within the "headers" option. See the demo page to see it working.

$(function(){
  $("table").tablesorter({

    dateFormat : "mmddyyyy", // default date format

    // or to change the format for specific columns,
    // add the dateFormat to the headers option:
    headers: {
      0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
      1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
      2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // year first format
    }

  });
});

Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):

jQuery data data-dateFormat="mmddyyyy".
metadata class="{ dateFormat: 'mmddyyyy'}". This requires the metadata plugin.
headers option headers : { 0 : { dateFormat : 'mmddyyyy' } }.
header class name class="dateFormat-mmddyyyy".
Overall dateFormat option.

Widget Priority	Name	Requires jQuery	Limiting function
30	columns	v1.2.6
50	filter	v1.4.3	1.4.3 (nextUntil & delegate)
Last	pager	v1.2.6
40	resizable	v1.4.1*	1.4 (isEmptyObject); 1.4.1 (parseJSON)*
20	saveSort	v1.4.1	1.4.1 (parseJSON)*
60	stickyHeaders	v1.2.6
10	uitheme	v1.2.6
90	zebra	v1.2.6

Method	Description	Link
addRows	Use this method to add table rows. (v2.0.16). It does not work the same as "update" in that it only adds rows, it does not remove them. Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist. // Add multiple rows to the table var row = '<tr><td>Inigo</td><td>Montoya</td><td>34</td>' + '<td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>', $row = $(row), // resort table using the current sort; set to false to prevent resort, otherwise // any other value in resort will automatically trigger the table resort. // A callback method was added in 2.3.9. resort = true, callback = function(table){ alert('rows have been added!'); }; $('table') .find('tbody').append($row) .trigger('addRows', [$row, resort, callback]);	Example
sort	Use this method to initialize a sort while targeting a specific column header (v2.9). // Target a specific header $('table').find('th:eq(2)').trigger('sort'); Using this method will maintain the sorting order; so, if the column is already sorted in ascending order, this method will act as if you manually clicked on the header. Whatever sort order is applied is dependent on other option settings such as `initialSortOrder`, `lockedOrder` (set within the `headers`), `sortReset` option, `sortRestart` and will be ignored if the column sort is disabled (`sorter: false`).
sorton	Use this method to sort an initialized table in the desired order. // Choose a new sort order var sort = [[0,0],[2,0]], callback = function(table){ alert('new sort applied to ' + table.id); }; // Note that the sort value below is inside of another array (inside another set of square brackets) // A callback method was added in 2.3.9. $("table").trigger("sorton", [sort, callback]);	Example
sortReset	Use this method to reset the table to it's initial unsorted state (v2.4.7). Don't confuse this method with the `sortReset` option. This method immediately resets the entire table sort, while the option only resets the column sort after a third click. // Reset the table (make it unsorted) $("table").trigger("sortReset");	Example
update / updateRow	Update the `tbody`'s stored data (`update` & `updateRow` do exactly the same thing) // Add new content $("table tbody").append(html); // let the plugin know that we made a update // the resort flag set to anything BUT false (no quotes) will trigger an automatic // table resort using the current sort // A callback method was added in 2.3.9. var resort = true, callback = function(table){ alert('new sort applied'); }; $("table").trigger("update", [resort, callback]); // As of version 2.0.14, the table will automatically resort after the update (if the "resort" flag is true // & will use the current sort selection), so include the following if you want to specify a different sort // set sorting column and direction, this will sort on the first and third column var sorting = [[2,1],[0,0]]; $("table") .trigger("update", [ false ]) .trigger("sorton", [sorting]);	Example
updateAll	Update a column of cells (`thead` and `tbody`) (v2.8). // Change thead & tbody column of cells // remember, "eq()" is zero based & "nth-child()" is 1 based $("table thead th:eq(2)").html("Number"); // add some random numbers to the table cell $("table tbody").find('td:nth-child(3)').html(function(i,h){ return Math.floor(Math.random()*10) + 1; // random number from 0 to 10 }); var resort = true, // re-apply the current sort callback = function(table){ alert('table updated!'); }; // let the plugin know that we made a update, then the plugin will // automatically sort the table based on the header settings $("table").trigger("updateAll", [ resort, callback ]);	Example
appendCache	Update a table that has had its data dynamically changed; used in conjunction with "update". Use this method when more than just one cell like in the "updateCell" method, but you may possibly have to trigger two events: both "update" and "appendCache". Note: This is the only method the pager widget uses - the entire table is stored in the cache, but only the visible portion is actually exists in the table. // Table data was just dynamically changed (more than one cell) $("table") .trigger("update") .trigger("appendCache");
updateCell	Update a table cell in the tablesorter data. $(function() { $("table").tablesorter(); $("td.discount").click(function(){ // Do we want to reapply the current sort on the column? var resort = false, // Do something after the cell update in this callback function callback = function(table){ /* do something / }, // randomize a number & add it to the cell discount = '$' + Math.round(Math.random() Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2); // add new table cell text $(this).text(discount); // update the table, so the tablesorter plugin can update its value // set resort flag to false to prevent automatic resort (since we're using a different sort below) // leave the resort flag as undefined, or with any other value, to automatically resort the table // $("table").trigger("updateCell", [this]); < - resort is undefined so the table WILL resort $("table").trigger("updateCell", [this, resort, callback]); // As of version 2.0.14, the table will automatically resort (using the current sort selection) // after the update, so include the following if you want to specify a different sort // set sorting column and direction, this will sort on the first and third column var sorting = [[3,1]]; $("table").trigger("sorton", [sorting]); return false; }); });	Example
applyWidgetId	Apply the selected widget to the table, but the widget will not continue to be applied after each sort. See the example, it's easier than describing it. $(function(){ // initialize tablesorter without the widget $("table").tablesorter(); // click a button to apply the zebra striping $("button").click(function(){ $('table').trigger('applyWidgetId', ['zebra']); return false; }); });	Example
applyWidgets	Apply the set widgets to the table. This method can be used after a table has been initialized, but it won't work unless you update the configuration settings. See the example, it's easier than describing it. // Update the list of widgets to apply to the table (add or remove) // $("table").data("tablesorter").widgets = ["zebra"]; // works the same as $("table")[0].config.widgets = ["zebra"]; // This method applies the widget - no need to keep updating $('table').trigger('applyWidgets');	Example
destroy	Use this method to remove tablesorter from the table. // Remove tablesorter and all classes $("table").trigger("destroy"); // Remove tablesorter and all classes but the "tablesorter" class on the table // callback is a function $("table").trigger("destroy", [false, callback]);
refreshWidgets	Refresh the currently applied widgets. Depending on the options, it will completely remove all widgets, then re-initialize the current widgets or just remove all non-current widgets (v2.4). Trigger this method using either of the following methods (they are equivalent): // trigger a refresh widget event $('table').trigger('refreshWidgets', [doAll, dontapply]); // Use the API directly $.tablesorter.refreshWidgets(table, doAll, dontapply) If `doAll` is `true` it removes all widgets from the table. If `false` only non-current widgets (from the `widgets` option) are removed. When done removing widgets, the widget re-initializes the currently selected widgets, unless the `dontapply` parameter is `true` leaving the table widget-less. Note that if the `widgets` option has any named widgets, they will be re-applied to the table when it gets resorted. So if you want to completely remove all widgets from the table, also clear out the widgets option `$('table')[0].config.widgets = [];`	Example
Widget Methods
search	filter: Trigger the filter widget to update the search from current inputs and/or selections (v2.4). This first method sends an array with the search strings to the filter widget. $(function(){ // apply "2?%" filter to the fifth column (zero-based index) var columns = []; columns[4] = '2?%'; // or define the array this way [ '', '', '', '', '2?%' ] $('table').trigger('search', [columns]); }); or, directly add the search string to the filter input as follows: $(function(){ // apply "2?%" filter to the fifth column (zero-based index) $('table').find('input.tablesorter-filter').eq(4).val('2?%'); $('table').trigger('search', false); // add a false flag to skip the search delay });
getFilters	filter: Get the currently applied filters in an array (v2.9): $.tablesorter.getFilters( $('table') ); // or use $('table.hasFilters') to make sure the table has a filter row This method returns an array of filter values (e.g. `[ '', '', '', '', '', '2?%' ]`) or `false` if the selected table does not have a filter row.
setFilters	filter: Set the filters using this method; include a `true` boolean to actually apply the search (v2.9): // update filters, but don't apply the search $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] ); // update filters, AND apply the search $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true ); // this will now use the search method This method returns `true` if the filters were sucessfully applied, or `false` if the table does not have a filter row.
filterReset	filter: Trigger the filter widget to reset the search criteria (v2.7.7). If you are using the `filter_formatter` option to add custom input elements, this function may not work on those columns. Please refer to the `filter_formatter` section for more details. $(function(){ // this is the same code that the `filter_reset` element runs to clear out the filters. $('button').click(function(){ $('table').trigger('filterReset'); return false; });	Example
addHeaderResizeEvent	Added a `resize` event to the table headers - used by the stickyHeaders widget, but this is a public function available to any widget (v2.10). There is no built-in resize event for non-window elements, so when this function is active it triggers a `resize` event when the header cell changes size. So, if you are writing your own widget and need a header `resize` event, just include the `jquery.tablesorter.widgets.js` file, or just the extract the function from that file. Enable these triggered events as follows: // Enable the triggering of header cell resize events as follows: var table = $('table')[0], disable = false, options = { timer : 250 // header cell size is checked every 250 milliseconds (1/4 of a second) }; $.tablesorter.addHeaderResizeEvent( table, disable, options ); Then use it in your custom widget as follows: $(table).on('resize', function(event, columns){ // columns contains an array of header cells that were resized // this seemed like a better idea than firing off a resize event for every // column when the table adjusts itself to fit within its container event.stopPropagation(); // optional // do something console.log( columns ); }); To disable these resize events, use this code: // Disable resize event triggering: var table = $('table')[0]; $.tablesorter.addHeaderResizeEvent( table, true );
saveSortReset	Trigger the saveSort widget to clear any saved sorts for that specific table (v2.7.11). $(function(){ $('button').click(function(){ $('table').trigger('saveSortReset'); return false; }); });
Pager Methods
pageSize	Trigger the pager to change the page size (v2.7.4). $(function(){ $('table').trigger('pageSize', 15); });
pageSet	Trigger the pager to change the current page (v2.7.7). $(function(){ $('table').trigger('pageSet', 3); });
destroy.pager	Calling this method will reveal the entire table, remove the pager functionality, and hide the actual pager (v2.0.16). $(function(){ $('table').trigger('destroy.pager'); }); The only way to restore the pager is to re-initialize the pager addon $(function(){ $('table').tablesorterPager(pagerOptions); });	Example
disable.pager	This method will put the pager into a disabled state (v2.0.21.2). The disabled state will reveal all table rows and disable, but not hide, pager controls. $(function(){ $('table').trigger('disable.pager'); });	Example
enable.pager	This method will re-enable the pager, but only from the disabled state (v2.0.21.2). $(function(){ $('table').trigger('enable.pager'); });	Example

Event	Description	Link
initialized	This event fires when tablesorter has completed initialization. (v2.2). $(function(){ // bind to initialized event BEFORE initializing tablesorter $("table") .bind("tablesorter-initialized",function(e, table) { // do something after tablesorter has initialized }); // initialize the tablesorter plugin $("table").tablesorter({ // this is equivalent to the above bind method initialized : function(table){ // do something after tablesorter has initialized } }); });
sortBegin	This event fires immediately before tablesorter begins resorting the table. $(function(){ // initialize the tablesorter plugin $("table").tablesorter(); // bind to sort events $("table").bind("sortBegin",function(e, table) { // do something crazy! }); });
sortStart	This event fires immediately after the tablesorter header has been clicked, initializing a resort. $(function(){ // initialize the tablesorter plugin $("table").tablesorter(); // bind to sort events $("table") .bind("sortStart",function(e, table) { $("#overlay").show(); }) .bind("sortEnd",function(e, table) { $("#overlay").hide(); }); });	Example
sortEnd	This event fires when tablesorter has completed resorting the table. $(function(){ // initialize the tablesorter plugin $("table").tablesorter(); // bind to sort events $("table") .bind("sortStart",function(e, table) { $("#overlay").show(); }) .bind("sortEnd",function(e, table) { $("#overlay").hide(); }); });	Example
updateComplete	This event fires after tablesorter has completed updating. (v.2.3.9) This occurs after an "update", "updateAll", "updateCell" or "addRows" method was called, but before any callback functions are executed. $(function(){ // initialize the tablesorter plugin $("table").tablesorter(); // bind to sort events $("table") .bind("updateComplete",function(e, table) { // do something after the table has been altered; }); });
Widget Events
filterInit	Event triggered when the filter widget has finished initializing (v2.4). You can use this event to modify the filter elements (row, inputs and/or selects) as desired. Use it as follows: $(function(){ $('table').bind('filterInit', function(){ $(this).find('tr.tablesorter-filter-row').addClass('fred'); }); });	Example
filterStart	Event triggered when the filter widget has started processing the search (v2.4). You can use this event to do something like add a class to the filter row. Use it as follows: $(function(){ $('table').bind('filterStart', function(){ $(this).find('tr.tablesorter-filter-row').addClass('filtering'); }); });	Example
filterEnd	Event triggered when the filter widget has finished processing the search (v2.4). You can use this event to do something like remove the class added to the filter row when the filtering started. Use it as follows: $(function(){ $('table').bind('filterEnd', function(){ $(this).find('tr.tablesorter-filter-row').removeClass('filtering'); }); });	Example
stickyHeadersInit	Event triggered when the stickyHeader widget has finished initializing (v2.10.4). You can use this event to do something like modify content within the sticky header: $(function(){ $('table').bind('stickyHeadersInit', function(){ // this.config.widgetOptions.$sticky contains the entire sticky header table this.config.widgetOptions.$sticky.find('tr.tablesorter-headerRow').addClass('sticky-styling'); }); });
Pager Events
pagerChange	This event fires when the pager plugin begins to render the table on the currently selected page. (v2.0.7). $(function(){ // initialize the sorter $("table") .tablesorter() // initialize the pager plugin .tablesorterPager({ container: $("#pager") }) // bind to pager events .bind('pagerChange pagerComplete', function(e,c){ // c.totalPages contains the total number of pages $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) ); }); });	Example
pagerComplete	This event fires when the pager plugin has completed its render of the table on the currently selected page. (v2.0.7). $(function(){ // initialize the sorter $("table") .tablesorter() // initialize the pager plugin .tablesorterPager({ container: $("#pager") }) // bind to pager events .bind('pagerChange pagerComplete', function(e,c){ // c.totalPages contains the total number of pages $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) ); }); });	Example
pagerBeforeInitialized	This event fires after all pager controls have been bound and set up but before the pager formats the table or loads any ajax data (v2.4.4). $(function(){ $("table") // initialize the sorter .tablesorter() // bind to pager initialized event BEFORE calling the addon .bind('pagerBeforeInitialized', function(e, c){ // e = event object; c = pager options }) // initialize the pager plugin .tablesorterPager({ container: $("#pager") }); });
pagerInitialized	This event fires when the pager plugin has completed initialization (v2.4.4). $(function(){ $("table") // initialize the sorter .tablesorter() // bind to pager initialized event BEFORE calling the addon .bind('pagerInitialized', function(e, c){ // c.totalPages contains the total number of pages $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) ); }) // initialize the pager plugin .tablesorterPager({ container: $("#pager") }); });	Example
pageMoved	This event fires when the pager plugin begins to change to the selected page (v2.4.4). This event may fire before the `pagerComplete` event when ajax processing is involved, or after the `pagerComplete` on normal use. See issue #153. $(function(){ // initialize the sorter $("table") .tablesorter() // initialize the pager plugin .tablesorterPager({ container: $("#pager") }) // bind to pager events .bind('pageMoved', function(e, c){ // c.totalPages contains the total number of pages $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) ); }); });	Example

tablesorter

Documentation

Flexible client-side table sorting

Contents

Introduction

Demo

Getting started

Examples

Basic

Sorting

Using Parsers / Extracting Content

Plugins / Custom Widgets / Custom Parsers

Advanced

Parsers / Extracting Content

Widgets / Plugins

Adding / Removing Content

Change Header Style

Other

Options & Events

Playgrounds & Other demos

Metadata - setting inline options

Configuration

Widget & Pager Options

Regex example

Comparison example

Methods

Events

Download

Browser Compatibility

Support

Credits