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.
- See the full documentation.
- All of the original document pages have been included.
- Information from my blog post on undocumented options and lots of new demos have also been included.
- Change log moved from included text file into the wiki documentation.
- Basic alpha-numeric sort Demo.
- Links to demo pages can be found within the main documentation.
- More demos & playgrounds - updated in the wiki pages.
- Multi-column alphanumeric sorting.
- Multi-tbody sorting - see the options table on the main document page.
- Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats) & time. Add your own easily.
- Support for ROWSPAN and COLSPAN on TH elements.
- 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+.
- Small code size.
- Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
- Copyright (c) 2007 Christian Bach.
- Original examples and docs at: http://tablesorter.com.
- Dual licensed under the MIT and GPL licenses.
- Big shout-out to Nick Craver for getting rid of the
eval()
function that was previously needed for multi-column sorting. - Also big thanks to thezoggy for helping with code, themes and providing valuable feedback.
- And, thanks to everyone else that has contributed, and continues to contribute to this forked project!
View the complete listing here.
- Fixed hiding filter rows when using filter_formatter elements. See issue #250.
- Fixed an issue with
updateCell
method not removing extra table rows before computing the row index of the cell that was just updated. - Added an
exactMatch
option to the html5color filter_formatter function. - Added missing documentation for the
updateCell
callback method. It's been there for a while!
-
Fixed several javascript errors:
- Empty cells in a numeric column should no longer cause an error - fixes issue #246.
- The tablesorter storage function should no longer cause an error when provided an undefined key - fixes issue #244.
-
Added
saveSortReset
method to clear any saved sorts for a specific table. Use it as follows:$('table').trigger('saveSortReset');
-
Added
delayed
options to several filter formatter functions.- Selectors that can be changed quickly - uiSlider, uiRange, uiSpinner, html5Range and html5Number - will now execute the filter query after a short delay.
- The filter delay time is set in the filter function option
filter_searchDelay
. The default delay is 300 milliseconds.
- Updated widget storage function to ensure no invalid strings are passed to the
$.parseJSON
function.- Thanks to andriijas for the code suggestion :)
- Fixes issue #240 & issue #244.
- Updated filter widget:
-
When cell content contains quotes and the filter select is added, the quotes are now properly processed to be included within the options. Fixes issue #242.
-
Empty cells are no longer added to the options. If you want to include empty cells, add the following (see this StackOverflow question):
<span style="display:none">{empty}</span>
Then you'll get a select dropdown showing
{empty}
allowing you to select empty content.
-
- Fixed an issue with the pager targetting an incorrect page when the table starts out empty.
- Get the correct number of columns when
widthFixed
istrue
and the first row contains a table. See issue #238.
- Fixed script errors:
- Comment start was stripped when converting files from UTF-8 w/BOM to UTF-8 w/o BOM.
- Fixed Firefox error in the filter-formatter files, when HTML5 elements don't exist, oops!
-
Updated the currency parser to ignore formatting (commas, decimals and spaces) when detecting the column parser.
-
Updated the natural sort regex to better work with scientific notation and alphanumerics with the number first - see this issue.
-
Reverted code to only add a colgroup if the
widthFixed
option istrue
and no colgroup exists. Fixes issues #238 and #239. -
Added a tablesorter namespace to all bound events. Fixes issue #233.
-
Added a
filterReset
method which is the same code executed when thefilter_reset
element is clicked. -
Added a
pageSet
method to the pager which allows you to easily change the pager page (see issue #231):// go to page 3 $('table').trigger('pageSet', 3);
-
Added a range filter to the filter widget.
- You can now search for a range of values using either of these formats:
10 - 20
or10 to 20
. Note the space before and after the dash so as to differentiate it from a negative sign. - You can also use symbols within the range
10% - 20%
or$10 - $20
. - Thanks to matzhu and satacoy for code ideas in issue #166.
- You can now search for a range of values using either of these formats:
-
Added logical AND and OR operators to the filters to the filter widget.
- Entering
box && bat
(orbox AND bat
) will only show rows that containbox
andbat
within the same column below the filter. It does not search other columns. The spaces between the operators and the queries are important. - Entering
box|bat
(orbox OR bat
) will only show rows that contain eitherbox
orbat
within the same column below the filter. It does not search other columns. The spaces between the operators and the queries are important. - At this time you cannot combine different operators. So,
>= 100 AND <= 200
will not work, use the range filter operator (100 - 200
) instead. - Using the
|
(or operator) was previously undocumented, but useable. - This was also requested in issue #166.
- Entering
-
Added a new filter widget option named
filter_formatter
:-
This option allows you to add custom selectors into the filter row.
-
Because of the amount of coding, new files named "jquery.tablesorter.widgets-filter-formatter.js" and "filter.formatter.css" were added. They include code to add jQuery UI and HTML5 controls via the filter_formatter option.
-
Filter formatter functions include: "uiSpinner", "uiSlider", "uiRange" (uiSlider ranged), "uiDatepicker" (range only), "html5Number", "html5Range" and "html5Color".
-
As an example, this code will add the jQuery UI spinner to the first column:
filter_formatter : { 0 : function($cell, indx){ return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, { value : 0, // starting value min : 0, // minimum value max : 50, // maximum value step : 1, // increment value by addToggle: true, // enable or disable the control exactMatch: true, numberFormat: "n" }); } }
-
You can also choose to add the current selector value into a css3 tooltip or into the header by setting the
valueToHeader
option, if available. -
Fulfills ErinsMatthew's feature request - issue #232. Thanks for the great idea!
-
-
NOTE: I know the js folder is getting messy. In version 3, I plan on having a separate folder for widgets and parsers. And with the build system, you'll be able to pick and choose which components you need.