Use the option to change the css class name as follows:

Use the option to add the column class names to the tfoot as follows:

Use the option to add the column class names to the thead as follows:

When the filter row is built, each table cell (<td>) will get the class name from this option.

Use the option to add an extra css class name as follows:

Note The cells from this option are also contained within the variable.

The option must also be for this option to work.

If , and the option is , then queries in will search all child content, as before this option was added.

Use the option as follows:

When using this option, please be aware that all child row content will be obtained from each table cell using , so none of the markup will be preserved. Also, carriage returns () will not be included. To account for the loss of white space, especially after carriage returns, please add an extra space to the end of the line. Using , could have been an option for preserving the white space, but it is not standardized across all browsers ().

Use the option to include child row text as follows:

Both & options must be set to for this option to work.

If , this option will only show the child row that matches the filter; and its parent row.

Use the option as follows:

Users can use the anymatch input to target a specific column, using a one-based index.

For example: In the table below, searching for 2:aa in an anymatch filter will result in "Phillip Aaron Wong" and "Aaron" showing in the First Name column.

See live examples in the Filter Widget External Search demo.

Use the option as follows:

As of v2.15, this option can also contain an array of class names that are to be applied to input filters.

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

Use the option to add an extra css class name as follows:

Use the option as follows:

Then add the default filter value to the table header as follows:

Warning If a column has a default filter set, the user will not be able to use other filters.

Use the option as follows:

Set up the column string as follows:

Use the option as follows:

Exclusion names must be separated by a comma. Here is a full list of filter type names:

Set this option to be a jQuery selector string, or jQuery object, pointing to any external inputs that are to be used for searching the table.

Use the option as follows:

These external inputs have one requirement, they must have a data-column="#", where the # targets the column (zero-based index), pointing to a specific column to search.

If you want to search all columns, using the updated "any match" method, set the data column value to "all":

The updated any matching code will now automatically update all associated inputs with the latest search.
This option replaces .

*NOTE* If creating a custom theme, make sure to include this definition (set to display:none or the filter widget will appear to be broken!

By default, a is included in the setting to insert a column label. The content is obtained from the header cell's attribute (do not include the prefix), if it exists, or the column header text. See the "First Name" column on the example page.

More complex labels may be included by adding multiple "data-attributes". For example, the following option:

filter_filterLabel : 'Filter the {{column-name}}, the {{ordinal-number}} column{{label-extra}}{{default-filter}}'

with this header cell HTML

<th data-column-name="last name" data-ordinal-number="second" data-default-filter=", using a fuzzy search" data-label-extra="">
  Last
<th>

would result in an ARIA-label of 'Filter the last name, the second column, using a fuzzy search'

Note:

In v2.17.0, the filter_formatter column can also be referenced by using a jQuery selector (e.g. class name or ID) that points to a table header cell.

Warning What won't work is if you try to target the header using a filtering selector that uses an index, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

A new file has been included named "widget-filter-formatter-jui.js" & "widget-filter-formatter-html5.js". The files include code to add jQuery UI and HTML5 controls via the option.

Most of the formatter functions have an option named valueToHeader which, when true adds a span to the header cell above the filter row and updates it with the current control's value (see example 2). If the option exists and is set to false, then the current value is added to the control's handle and css can be used to create a popup to show the current value (see example 1).

Another custom option named addToggle is included with the "uiSpinner", "html5Color" and "html5Number" code. This allows the user to disable the control to show all table rows. For the single sliders, "uiSlider" and "html5Range", the minimum value is used to clear the filter (show all rows).

The options included for each jQuery UI control only show basic options, but any or all of the jQuery UI options for that control can be included.

In v2.22.0, a parameter was added to that long list of parameters.

*WARNING* In a future update, the filter function parameters will be cleaned up and changed as follows!

The e (exact table cell text), n (normalized table cell text), f (filter input value), i (column index) and $r (current row; jQuery object) are all already included in the object.

In v2.17.0, the filter_functions column can also be referenced by using a jQuery selector (e.g. class name or ID) that points to a table header cell.

Warning What won't work is if you try to target the header using a filtering selector that uses an index, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

Use the option in three different ways:

Use the option as follows:

Use the option as follows:

You can change the style (thickness) of the hidden filter row in the tablesorter theme css. Look for .tablesorter-filter-row (revealed row) and .tablesorter-filter-row.hideme (for the hidden row) css definitions. In v2.26.6, this setting can also contain a function.

Example of function setting:

Use the option as follows:

This option, when false allows you to disable the live search behavior, so that a filter is only applied when the user presses Enter (or uses Esc to clear and cancel the search).

If this option is set to a number, e.g. 4, a search of the column content will not initiate until this minimum number of characters are entered into the input.

In , this option can be set as an object containing specific column zero-based indexes, or class names. For undefined columns, include a value otherwise undefined columns will be set as .

A basic input filter will match the filter query until a "and" and "or" type search is performed.

By default, select filters and "and" and "or type searchs will look for an exact match, and to override this behavior you *had* to add a "filter-match" class to the columns to allow partial matches.

This option allows you to set a global "match" setting and save you the trouble of adding a bunch of classes.

There are only two options: "exact" and "match"; and it defaults to "exact" if anything else is entered.

In the demo, try searching for super or man in the first column.

In v2.17.6, columns with the only available class name set, that are not currently being filtered will only show the available options. Conversely, the column(s) with a selected option will show all options.

This option is useful after one or more columns have been filtered, then the column select filter with this class applied will only show the contents of the column within the dropdown that are currently visible. See the custom filter widget demo "Discount" column for an example (sort the "First Name" column first).

Caution: The main issue with this functionality is with keyboard accessibility. If the keyboard is used to select an option, only the first and default options will be available for chosing. The only way to select other options is with the mouse.

Any search type input added to the filter row will automatically get a placeholder attribute added, the source of this placeholder text is from the following sources, in order of priority:

The filter_placeholder.select setting adds the text to the first select option (default option to show all rows).

Note: The widget-filter-formatter-jui.js jQuery UI Datepicker Range Selector creates two inputs, so this option then includes two additional settings:

Note: The browser must support the placeholder attribute before it will be visible.

When this option points to a reset element using a jQuery selector string, it is bound using . So if any additional reset elements, with the same class name, are added to the page dynamically, they will be associated with the same table. For example, add this button () to the table header, or anywhere else on the page. That element will be used as a reset for all column and quick search filters (clears all fields):

Use the option as follows:

If this option contains a jQuery object (v2.16), clicking on any of the elements within that jQuery object will trigger a filter reset. If any additional elements with the same selector are added to the page, they will not be dynamically functional.

If either of these methods do not work as desired, simply trigger a event on the table.

Webkit browsers automatically clear the filter search input when pressing escape, but IE and Firefox do not. Setting this option to , clears the filter input when the user presses escape.

When this option is set to false, pressing escape inside the search field is ignored.

Filters saved to local storage (or cookies) will override any default filters within the header data-attribute (set by the option) and be available to the pager before any ajax calls are made.

To bypass this behavior, clear out the saved filters as follows:

Use the option as follows:

If you want to want to initialize the filter without user input, target any one of the filters and trigger a "search".

In tablesorter v2.4+, the trigger can be applied directly to the table:

To better explain this, lets do it by example. Lets say you have a column of color names and you enter "light" and results like "light blue" and "light grey" show up.

When you press the space bar, a space is added, and instead of searching though all of the colors again, the filter widget only searches through the already filtered results that started with "light". This can substantially speed up searching, especially in large tables.

But, there are some special circumstances which would make this method return incorrect results. So, this option was added to allow you to disable this feature in case one of these following conditions doesn't cover your need; but still, please report any issues!

The search through filtered results only occurs if the following conditions are met:

If the debug option is set to true, then a message will appear while filtering stating the specific number of rows, or "all" rows, that are being searched.

Use the option as follows:

In v2.24.4, this option will now accept an array of objects which can contain extra information for each option. Here is an example modified from the filter selectmenu demo:

In , return from a function to prevent updates to the select options. Useful if you are updating the select options from outside of tablesorter.

In , an option to have a descending sort applied to this data can be done by adding a to the header cell. Adding a class name to a header to prevent sorting has been available since v2.16.3.

In , this option will now override the options (), allowing the addition of custom select options and still maintain basic filtering action - see ().

In v2.17.0, the filter_selectSource column can also be referenced by using a jQuery selector (e.g. class name or ID) that points to a table header cell.

Warning What won't work is if you try to target the header using a filtering selector that uses an index, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

A column will have a filter select dropdown when a "filter-select" class name is added to the header cell, or if the column value is set to true

This option allows using an alternate source, or customizing options of the filter select dropdown. This option can be set as follows:

The function uses the following parameters:

Important Return an array of values which will be added to the filter select dropdown. This array will automatically be stripped of any duplicate values and sorted alphanumerically before being added to the select. If for some reason the custom filter_selectSource function does not obtain the desired array of values, return false and the original method of obtaining column cell content will be used.

Use the option as follows:

Results in this HTML:

This also works for the filter_functions

Results in this HTML (this adds a data-function-name attribute to keep a reference to the associated filter_functions.

Use the option as follows:

Use the option as follows:

Use the option as follows:

Use the option to not save the resized widths:

If an anchor was included and the table is full width, the column would resize in the opposite direction which my not be intuitive to the user. So set this option as desired, but please be mindful of the user experience.

Use the option to include the last column resizer as follows:

When , this option includes the entire height of the table footer. If the table does not include a footer, the resize handle will stop at the last row.

If , the resizable handle will not extend into the table footer.

When , resizing a column will change the size of the selected column, and the last column, not the selected column's neighbor.

When , resizing a column will move the column border between it's neighbors.

Also, in a , if this option is , the same behavior as when this option is can be seen when resizing a column while holding down the key on the keyboard - the last column is resized.

When false throttling of the mousemove (resizing) event is not applied.

Set this option to either true for a default 5 millisecond delay, or set it to any number less than 10 to adjust the throttling delay that is applied to the mousemove/resizing event.

Use the option as follows:

Use the option as follows:

Use the option to not save the current sort:

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

Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).

Use the option to add an extra css class name as follows:

While this option is true, a timer is initialized to check the width of every header cell every 1/4 second. If this causes lag, or any other problems, set this option to false. When this option is false, sticky table headers are unable to detect and match the width of the original table headers when content is added or removed.

Use the option as follows:

When the browser window is resized, the headers (original and sticky) will resize automatically no matter the value of this option.

Appending the sticky headers to an element that does not have the same dimensions (width) as the table wrapper will produce a sticky header that does not match the table size!

Use the option as follows:

Use the option as follows:

So if your table ID is "gummy", then the cloned sticky table id becomes "gummy-sticky"

Use the option to change the cloned table id as follows:

When a user searches the table using the sticky header filter row the results may reduce the number of rows so that the table would scroll up out of the viewport. So, this option scrolls the table top into view and moves the filter focus to the same input in the original header, instead of the sticky header input.

Set this option to false to prevent the page scroll after filtering the table.

Use the option as follows:

If the page includes a fixed navigation bar at the top, like Bootstrap, set option to offset the sticky table header to be below the fixed navigation by setting this option using any of the following examples:

or

or

If undefined (or null), the window element will be monitored.

Use the option as follows:

If undefined (or null), the window element will be monitored.

Use the option as follows:

Use the option as follows:

This option replaces and will override the now deprecated option.

If there is a value within the table's "data-table-page" (set by the option), it will override this setting.

A more detailed list of the table url priority settings can be found in the function description.

If a value is set in this option, the storage widget looks in that defined table data-attribute for a table id.

If this option is not defined, then the default data-attribute for the table becomes .

The value in the data-attribute sets a table id, if not found, the storage widget then looks for an id in the option.

If a value is set in this option, the storage widget looks in that defined table data-attribute for a table url.

If this option is not defined, then the default data-attribute for the table becomes .

The value in the data-attribute sets a table url, if not found, the storage widget then looks for a url in the option.

If value is set in this option, the deprecated is completely ignored.

Use the option as follows:

When grouping together multiple tables, setting the variable on one table will not cause the setting to modify a second table, the change will only be apparent on page reload.

If this option is not defined, the actual table id will be used (which isn't conducive to applying to multiple tables!)

A more detailed list of the table id priority settings can be found in the function description.

In , this option is replaced by the option and will be completely ignored if that option has setting.

If this option is set to , all saved variables for the table will be within local storage ().

If , all saved variables for the table will be within the session storage. This means once the user closes the browser, all saved variables are lost.

Use the option to switch to session storage as follows:

Use the option to change the theme as follows:

In v2.23.1

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_ajaxError

When there is an ajax error, the function is called. In v2.23.0, that function now checks this callback to allow adding a custom error message.

Use it as follows:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_ajaxObject

The ajaxObject is completely customizable, except for the url setting which is processed using the pager's ajaxUrl and customAjaxUrl options. This means you can also add a success callback function which is called after the ajax has rendered.

Your server does not need to return a JSON format, if you want to return pure HTML, set the dataType to "html" and modify the ajaxProcessing function to instead work with HTML; then return a jQuery object or apply the HTML to the table yourself.

See all possible settings in the jQuery.ajax documentation

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_ajaxProcessing

This function was created and modified to allow you a great deal of flexibility. The only required information that this function needs to return is an array containing the total number of rows, which is needed to calculate total pages.

There are numerous examples below. Choosing which one to use is left to you. For more information, please check out related questions on Stackoverflow, in particular see this thread about how to use the different ajax options together.

In v2.10, the returned rows is now optional. And it can either be an array of arrays or a jQuery object (not attached to the table)

Process your ajax data so that the following information is returned:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_ajaxUrl

The tags within the ajaxUrl string are optional. If do not want the user to change the page size, then you only need to include the page in this string:

If you need to send your server a page offset (actual starting record number), then you'll need to use the option.

Here is an example of how to include the option, it should always be paired with an ajaxProcessing function:

The ajaxUrl template replaces the following tags with values from the tablesorter plugin and pager addon:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.container; additionally you can change the class name that is applied to the pager (used within the jquery.tablesorter.pager.css file) by modifying the widgetOption.pager_css.container class name (default is "tablesorter-pager")

This is some example pager markup. It should contain all of the controls set by the multiple css-named options:

Caution If you use buttons in your pager container, make sure the buttons include a button type (<button type="button">Next</button>) to prevent form submission and page reloading every time the button is clicked.

Use this option as follows:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_countChildRows

*CAUTION* When true, child row(s) may not appear to be attached to its parent row, may be split across pages or may distort the table if rowspan or cellspans are included within the child row.

If this option is false, child row(s) will always appear on the same page as its parent.

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_css.disabled

More explicitly, this class is applied to the pager arrows when they are at either extreme of pages and the updateArrows option is true. When the pager has been disabled, this class is applied to all controls.

Note there is no period "." in front of this class name (it is not a selector).

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_css.errorRow

Note there is no period "." in front of this class name (it is not a selector).

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.first

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.gotoPage (changed from goto in v2.17.3)

Please note that this select dropdown is initially empty and automatically updated by the plugin with the correct number of pages, which depends on the setting.

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.last

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.next

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.pageDisplay

In the original tablesorter (v2.0.5) this option could only target an input, it was updated (v2.0.9) to display the formatted output from the output option inside of any element (span, div or input).

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.pageSize

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_selectors.prev

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_customAjaxUrl

The customAjaxUrl function has two parameters, the table DOM element and the processed url string (all tags within the ajaxUrl have been replaced with their appropriate values).

In the following example, lets say your server needs a starting and ending record number instead of a page & size parameter. Use this option as follows:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_fixedHeight

This option replaced the original positionFixed and offset options which set the absolute position of the pager block.

If true, it should maintain the height of the table, even when viewing fewer than the set number of records (go to the last page of any demo to see this in action). It works by adding an empty row to make up the differences in height.

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_initialRows

Use this option as follows:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_output

In v2.28.4

The element can now include two data-attributes, and which override this setting when set.

It will not override this option if set as a function, or if a specific from the server through ajax.

In v2.27.7, this option can also be set as a function

This option replaced the original separator option, which only separated the page number from the total number of pages. The formatted output from this option is placed inside the information block targeted by the cssPageDisplay option.

Use it as follows:

The following tags are replaced within the output string:

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_startPage

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_pageReset

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_processAjaxOnInit

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_removeRows

The original tablesorter plugin (v2.0.5) removed rows automatically, without providing an option. It really does speed up sorting of very large tables, but also breaks updating and modifying table content dynamically.

If this option is false, the addon only hides the non-visible rows; this is useful if you plan to add/remove rows with the pager enabled.

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_savePages

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_size

Set this option to to show all rows (added ).

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_storageKey

Note The pager widget equivalent option is within the widgetOptions and accessed via widgetOptions.pager_updateArrows

If true the classname from the cssDisabled option is applied to the arrows when at either page extreme.

This option has been replaced by the option.

Show any rows that match a search query. If this option is true any column match will show that row; but there are limitations (v2.13.3).

It is best if this option is used with a single search input as follows:

The original tablesorter pager plugin absolutely positioned the pager controls at the bottom of the table. It appears that this option was intended to tweak the position of the pager container. The option exists, but no code was found.

If this option were true, the original tablesorter pager plugin would absolutely position the pager controls at the bottom of the table.

The original tablesorter pager plugin would combine the current page with the calculated total number of pages within the cssPageDisplay with this separator string inbetween.

This option contains the name of the theme. Currently jQuery UI ("jui") and Bootstrap ("bootstrap") themes are supported (updated v2.4)

only the widget option was removed. All of the information below is still pertinent and portions have been copied to the core option.

To modify the class names used, extend from the variable as follows:

This widget option replaces the previous widgetUitheme. All theme css names are now contained within the $.tablesorter.themes variable. Extend the default theme as seen above.

The class names from the $.tablesorter.themes.{name} variable are applied to the table as indicated.

As before the jQuery UI theme applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (Modified v2.1; Updated in v2.4). Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

Use the option to change the css class name as follows:

To add a new theme, define it as follows; replace "custom" with the name of your theme: