Flexible Client-Side Table Sorting Plugin - tablesorter

Flexible Client-Side Table Sorting Plugin - tablesorter
File Size: 1.95 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes and any server-side code.  tablesorter can successfully parse and sort many types of data including linked data in a cell.

You may also like:

Features:

  • Multi-column sorting
  • 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+
  • Small code size

Basic Usage:

1. Include the latest jquery library and other necessary javascript files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>

2. Include Theme CSS

<link href="css/theme.default.css" rel="stylesheet">

3. Create a sortable table (example)

<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric Sort</th>
<th>Currency</th>
<th>Alphabetical</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>&#163;10,40</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>&#163;234,10</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>&#163;10,33</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>&#163;10</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>&#163;3,20</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>&#163;56,10</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>&#163;3,20</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>&#163;87,00</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>&#163;99,90</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>&#163;234,10</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
</tbody>
</table>

4. Call the plugin

<script>
$(function(){
$('table').tablesorter({
widgets        : ['zebra', 'columns'],
usNumberFormat : false,
sortReset      : true,
sortRestart    : true
});
});
</script>

5. Settings.

// *** appearance
theme            : 'default',  // adds tablesorter-{theme} to the table for styling
widthFixed       : false,      // adds colgroup to fix widths of columns
showProcessing   : false,      // show an indeterminate timer icon in the header when the table is sorted or filtered.

headerTemplate   : '{content}',// header layout template (HTML ok); {content} = innerHTML, {icon} = <i/> (class from cssIcon)
onRenderTemplate : null,       // function(index, template){ return template; }, (template is a string)
onRenderHeader   : null,       // function(index){}, (nothing to return)

// *** functionality
cancelSelection  : true,       // prevent text selection in the header
tabIndex         : true,       // add tabindex to header for keyboard accessibility
dateFormat       : 'mmddyyyy', // other options: "ddmmyyy" or "yyyymmdd"
sortMultiSortKey : 'shiftKey', // key used to select additional columns
sortResetKey     : 'ctrlKey',  // key used to remove sorting on a column
usNumberFormat   : true,       // false for German "1.234.567,89" or French "1 234 567,89"
delayInit        : false,      // if false, the parsed table contents will not update until the first sort
serverSideSorting: false,      // if true, server-side sorting should be performed because client-side sorting will be disabled, but the ui and events will still be used.

// *** sort options
headers          : {},         // set sorter, string, empty, locked order, sortInitialOrder, filter, etc.
ignoreCase       : true,       // ignore case while sorting
sortForce        : null,       // column(s) first sorted; always applied
sortList         : [],         // Initial sort order; applied initially; updated when manually sorted
sortAppend       : null,       // column(s) sorted last; always applied
sortStable       : false,      // when sorting two rows with exactly the same content, the original sort order is maintained

sortInitialOrder : 'asc',      // sort direction on first click
sortLocaleCompare: false,      // replace equivalent character (accented characters)
sortReset        : false,      // third click on the header will reset column to default - unsorted
sortRestart      : false,      // restart sort to "sortInitialOrder" when clicking on previously unsorted columns

emptyTo          : 'bottom',   // sort empty cell to bottom, top, none, zero
stringTo         : 'max',      // sort strings in numerical column as max, min, top, bottom, zero
textExtraction   : 'basic',    // text extraction method/function - function(node, table, cellIndex){}
textAttribute    : 'data-text',// data-attribute that contains alternate cell text (used in textExtraction function)
textSorter       : null,       // choose overall or specific column sorter function(a, b, direction, table, columnIndex) [alt: ts.sortText]
numberSorter     : null,       // choose overall numeric sorter function(a, b, direction, maxColumnValue)

// *** widget options
widgets: [],                   // method to add widgets, e.g. widgets: ['zebra']
widgetOptions    : {
	zebra : [ 'even', 'odd' ]    // zebra widget alternating row class names
},
initWidgets      : true,       // apply widgets on tablesorter initialization

// *** callbacks
initialized      : null,       // function(table){},

// *** extra css class names
tableClass       : '',
cssAsc           : '',
cssDesc          : '',
cssNone          : '',
cssHeader        : '',
cssHeaderRow     : '',
cssProcessing    : '', // processing icon applied to header during sort/filter

cssChildRow      : 'tablesorter-childRow', // class name indiciating that a row is to be attached to the its parent 
cssIcon          : 'tablesorter-icon',     //  if this class exists, a <i> will be added to the header automatically
cssInfoBlock     : 'tablesorter-infoOnly', // don't sort tbody with this class name (only one class name allowed here!)

// *** selectors
selectorHeaders  : '> thead th, > thead td',
selectorSort     : 'th, td',   // jQuery selector of content within selectorHeaders that is clickable to trigger a sort
selectorRemove   : '.remove-me',

// *** advanced
debug            : false,

// *** Internal variables
headerList: [],
empties: {},
strings: {},
parsers: []

// deprecated; but retained for backwards compatibility
// widgetZebra: { css: ["even", "odd"] }

Change Log:

v2.28.11 (2017-05-25)

  • Bugfixes.

v2.28.10 (2017-05-17)

  • Disable updateCell method for child rows (temporary block until code is fixed).
  • Add namespace class name to table.
  • Prevent input select parser from handling events from child rows.
  • Remove unused variables & add ignoreChildRow option.
  • Bind & update stickyHeaders checkbox.
  • Use correct composer.json jQuery version. 
  • Clarify use of GPLv2 license. 
  • Update dependencies.

v2.28.9 (2017-05-04)

  • Fix widget option changes across multiple tables; seen in the second table of the math page demo with the math_ignore option.
  • Include noop math_complete in defaults; prevents option not recognized warning

v2.28.8 (2017-04-19)

  • Core: Fixed updateCell to work correctly with child rows. 
  • Filter: Add equalFilters function; for more reliable comparisons.
  • Pager: use equalFilters function for comparison. See issue #1384.
  • Resizable: Add resizable_includeFooter option. Fixes issue #1386.
  • Scroller: Set max-width to initial. See issue #1382.
  • Scroller: Fix offset from hidden row. See issue #1376.
  • Scroller: Fix linting issue.
  • Storage: Add options early to prevent validator message.
  • Storage: Add storage_storageType option & deprecate storage_useSessionStorage.
  • Meta: Update dependencies x2.

v2.28.7 (2017-04-12)

  • Editable: Remove "blur" event listeners.
  • Filter: Add "filterAndSortReset" method. 
  • Filter: Prevent JS error added from last update.
  • Meta: Fix composer.json license.

v2.28.0 (2017-04-03)

  • Prevent multiple popups/download with dblClick (i.e. triggering "outputTable" multiple times).
  • Remove extraneous console log.
  • Add "resizableUpdate" & "resizableReset" methods.:
  • Add scrollerComplete event.

v2.17.8 (2014-09-16)

  • Fix widthFixed option to ignore info block tbodies.
  • Make emptyTo & stringTo settings case insensitive.
  • An empty string headerTemplate option will now prevent adding an inner div to the header.
  • Fix setting active accordion from hash script.
  • Add emptyTo clarification.
  • Main readme: Add related projects section.
  • Autoresort true no longer breaks the table.
  • Update demo to use row id instead of index.
  • Update validate function to allow setting it per column.
  • Add editable_focus, editable_blur and editable_selectAll options. See issue #708.
  • Add editable_wrapContent option.
  • Add editable_trimContent option.
  • Validate function now includes a contenteditable element parameter.
  • All text callback parameters are now trimmed.
  • Trim everything & revert widget changes.
  • Refocus edited element after resort only.
  • Switch form focus to focusout.
  • Add filter_defaultFilter option.
  • Add filter_excludeFilter option; add multiple exclusions separated by spaces, not commas.
  • Prevent multiple searches during initialization.
  • Ensure initial filter settings get applied.
  • Selects will exactly match the selected option unless "filter-match" class is set. 
  • Update cache & rows copy. Fixes issue #703.
  • Use native javascript to populate & set the goto select. Fixes issue #711.
  • Custom pager controls. Fix control updates for multiple tables.
  • Fix pager widget to be properly applied after a page move.
  • StickyHeaders: Fix issue so it works with jQuery v1.2.6 again.
  • Zebra: Apply style to one row. 
  • Parser update.

v2.17.7 (2014-08-10)

  • Update.

v2.17.6 (2014-08-02)

  • Adding a class name of parser-false to a column will now automatically set sorter-false and filter-false behavior.
  • Add extractor type which allows giving a column two parsers, one to extract content from an input/select and the second to parse the extracted text. Thanks to TheSin-!
  • Ensure custom parsed data adheres to the ignoreCase option.
  • Add a delay to any sort if there is an update in progress. This prevents issues with a sort being applied causing duplicate rows to be added to the table, hopefully.
  • The widthFixed option now finds both visible th and td cells within the first row of the tbody to set column width percentages.
  • Ensure all rows have a set role for screen readers (role="row"). Fixes issue #690.
  • Redefine c.$headers when building headers for new/replaced header cells (not just content). 
  • Fixed lots of minor HTML issues.
  • Add parser for textareas within the parser-input-select.js file.
  • Modify input & textarea parser to only update the table cache.
  • Add two new options: editable_autoAccept and editable_validate.
  • Modify editable_columns type check to prevent javascript errors. 
  • Limit the editable_columns array value to columns within the table.
  • Make all options show within the current select when the filter-onlyAvail class is set on a column.
  • Updated & added docs for $.tablesorter.filter.buildSelect function to allow external calls to modify filter select options.
  • Update filter_selectSource to accept arrays instead of a function. This was documented as working, but it wasn't coded until now. Sorry!
  • Add filter_selectSourceSeparator option.
  • The ouput option can now include user modifiable startRow ({startRow:input}) or page ({page:input}) inputs within the output.
  • Update $.tablesorter.addHeaderResizeEvent function's first parameter table to accept table DOM elements as well as jQuery objects. 

v2.17.5 (2014-07-04)

  • Add $.tablesorter.hasWidget(table, 'widgetId') function. It returns a boolean value of true when the named widget is actively applied to the table.

v2.17.4 (2014-07-04)

  • Add $.tablesorter.hasWidget(table, 'widgetId') function. It returns a boolean value of true when the named widget is actively applied to the table.
  • Add filter_searchFiltered option to allow disabling the search of already filtered rows.
  • The filter_initialized flag now gets set appropriately. 
  • Include any column filter in determination of searching already filtered rows. 
  • Add internal config.filteredRows variable. Provides a value of the number of currently filtered (visible) rows. 
  • Add internal config.totalRows variable. Provides a value of the total number of rows in the current table, not including info-tbody rows.
  • Fix change/search event being ignored for selects & filterFormatter extensions.
  • filterInit and filterEnd events now pass config as a parameter.
  • Removed from beta status
  • Filtered rows now equals the total rows when ajaxProcessing returns an array. 
  • Update the config.filteredRows when using ajax to match the internal config.pager.filteredRows. 
  • Widget only: ensure pagerComplete event fires on initialization.
  • Bind mousemove to document instead of table header. Makes resizable handle use consistent with other resizing libraries, as the user would expect. .
  • Add resizable_throttle option to allow throttling of the mousemove/resize event. Set this option to true or a number between 1 and 10 to add a throttling delay. 
  • UITheme: non-existent columns no longer cause a js error. 

v2.17.3 (2014-06-29)

  • update and bugs fix.

v2.17.2 (2014-06-19)

  • update and bugs fix.

v2.16.4 (2014-05-05)

  • update

v2.16.3 (2014-05-01)

  • update

v2.15.14 (2014-04-10)

  • Modified bower.json to allow "read-components" compatibility. 
  • Corrected docs
  • Core: Destroy method update
  • See this Stackoverflow question for why this change was made.
  • Grouping widget: group name now saves after callback. 
  • Pager processAjaxOnInit now works with jQuery objects.
  • Filter widget: getFilters will not cause a js error when it targets a non-tablesorter table.

v2.15.13 (2014-04-04)

  • Fix widgets not being applied after an update.
  • Ignore child row class name if it is the first table row
  • Filter widget ignores info tbodies again. Fixes issue #568
  • Docs: show resizable widget update
  • Bootstrap theme:
  • Fix zebra highlighting for child rows

v2.15.12 (2014-03-19)

  • Prevents an error in IE8
  • Fixed merge issues, then modified code to minize use of this indexing
  • Cell column property has correct value again.
  • Replaced references to cell.cellIndex with $(cell).index()
  • Fix docs so nested accordions open with hash.
  • Added tablesorter-hasChildRow class name to all parents of child rows.
  • Added .tablesorter .filtered { display: none; } to every included theme; needed to properly hide child rows
  • Fixed pager so that if the last pager row has any child rows, they are now included. 
  • Add resizable_widths option

v2.15.11 (2014-03-19)

  • Updated Bootstrap to v3.1.1
  • Check if cell has parser to catch undefined error.
  • Column count is now correct with nested tables (with tfoot).
  • Fix table reset on pagination change.

v2.15.10 (2014-03-14)

  • Fix numberSorter option causing a javascript error & added test.

v2.15.9 (2014-03-13)

v2.15.6 (2014-03-08)

  • cleanup & version bump

v2.15.3 (2014-02-22)

  • updated to the latest version.

v2.15.2 (2014-02-21)

  • updated to the latest version.

v2.15.1 (2014-02-20)

  • updated to the latest version.

v2.14.3 (2013-12-17)

  • updated to the latest version.

v2.14.2 (2013-12-03)

  • updated to the latest version.

v2.14.1 (2013-11-23)

  • updated to the latest version.

v2.14.0 (2013-11-20)

  • updated to the latest version.

v2.13.3 (2013-11-10)

  • updated to the latest version.

v2.13.0 (2013-10-31)

  • Bugs fixed.
  • Added pager countChildRows option (plugin & widget)
  • Added a file-type parser
  • Updated LESS theme to work properly with LESS 4.1+

v2.12.0 (2013-10-19)

  • Added fixedUrl option for use with the widget storage function. 

v2.11.1 (2013-10-12)

  • bugs fixed

v2.10.8 (2013-06-05)

  • Updated the percent parser to only detect if the content is shorter than 15 characters. This prevents columns with a lot of content and one percent sign (%) from being set to be parsed as a percent numeric column. Fixes issue #320.
  • Updated filter widget & filter_formatter
  • Fixed stickyHeaders widget

v2.10.7 (2013-06-01)

  • Fixed Issue with updateCell Event with Multiple tbody's on Page

v2.10.6 (2013-05-31)

  • Added skipTest options to the HTML5 filter formatter functions. Fixed html5Number doesn't work on FF 20/21
  • Fixed filter_formatter and stickyHeaders
  • Fixed stickyHeader filter value issue

v2.10.4 (2013-05-29)

  • Added stickyHeadersInit event, which is triggered on the table after the sticky headers widget has completed initializing.
  • Filtering child rows should now work properly.

v2.10.3 (2013-05-27)

  • Updated pager pageSize method to properly store the set page size

v2.10.0 (2013-05-09)

  • Features updated and bugs fixed

v2.9.1 (2013-04-14)

  • fixes stickyHeader widget lag

v2.8.2 (2013-04-13)

  • Updated the "ignore-leads" parser
  • Fixed a bug in the grouping widget demo

v2.8.2 (2013-03-29)

  • Updated the "ignore-leads" parser

v2.8.1 (2013-03-28)

  • Added customAjaxUrl option to the pager

v2.8.0 (2013-03-28)

  • More features updated and bugs fixed.

v2.7.12 (2013-03-01)

  • Fixed hiding filter rows when using filter_formatter elements. 
  • 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!

This awesome jQuery plugin is developed by Mottie. For more Advanced Usages, please check the demo page or visit the official website.