mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
1731 lines
76 KiB
HTML
1731 lines
76 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<script src="js/chili/jquery.chili-2.2.js"></script>
|
|
<script src="js/chili/recipes.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link href="../css/blue/style.css" rel="stylesheet">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
<script>
|
|
$(function() {
|
|
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]],widgets:['zebra']});
|
|
$("table.options").tablesorter({sortList:[[0,0]],headers:{3:{sorter:false},4:{sorter:false}},widgets:['stickyHeaders']});
|
|
$("#methods,#events").tablesorter({sortList:[[0,0]],headers:{1:{sorter:false},2:{sorter:false}}});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body id="root">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Documentation</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="#"></a>
|
|
</div>
|
|
<div id="main">
|
|
<div class="digg">
|
|
</div>
|
|
<p>
|
|
<strong>Author:</strong> Christian Bach<br>
|
|
<strong>Version:</strong> <a class="current-version" href="http://github.com/Mottie/tablesorter/downloads">2.1+</a> (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="https://github.com/Mottie/tablesorter/wiki/Change">changelog</a>)<br>
|
|
<strong>Licence:</strong>
|
|
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
|
|
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
|
|
</p>
|
|
|
|
<a id="Contents"></a>
|
|
<h1>Contents</h1>
|
|
<ol>
|
|
<li><a href="#Introduction">Introduction</a></li>
|
|
<li><a href="#Demo">Demo</a></li>
|
|
<li><a href="#Getting-Started">Getting started</a></li>
|
|
<li><a href="#Examples">Examples</a></li>
|
|
<li><a href="#Configuration">Configuration</a></li>
|
|
<li><a href="#Widget-options">Widget Options</a> (New v2.1)</li>
|
|
<li><a href="#Methods">Methods</a></li>
|
|
<li><a href="#Events">Events</a></li>
|
|
<li><a href="#Download">Download</a></li>
|
|
<li><a href="#Compatibility">Compatibility</a></li>
|
|
<li><a href="#Support">Support</a></li>
|
|
<li><a href="#Credits">Credits</a></li>
|
|
</ol>
|
|
|
|
<a id="Introduction"></a>
|
|
<h1>Introduction</h1>
|
|
<p>
|
|
tablesorter is a <a class="external" href="http://jquery.com">jQuery</a> 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:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Multi-column sorting</li>
|
|
<li>Multi-tbody sorting - see the <a href="#options">options</a> table below</li>
|
|
<li>Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. <a href="example-parsers.html">Add your own easily</a></li>
|
|
<li>Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)</li>
|
|
<li>Extensibility via <a href="example-widgets.html">widget system</a></li>
|
|
<li>Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+</li>
|
|
<li>Small code size</li>
|
|
|
|
</ul>
|
|
|
|
<a id="Demo"></a>
|
|
<h1>Demo</h1>
|
|
|
|
<table id="tablesorter-demo" class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Account #</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Age</th>
|
|
<th>Total</th>
|
|
<th>Discount</th>
|
|
<th>Difference</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>A42b</td>
|
|
<td>Peter</td>
|
|
<td>Parker</td>
|
|
<td>28</td>
|
|
<td>$9.99</td>
|
|
<td>20.9%</td>
|
|
<td>+12.1</td>
|
|
<td>Jul 6, 2006 8:14 AM</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A255</td>
|
|
<td>John</td>
|
|
<td>Hood</td>
|
|
<td>33</td>
|
|
<td>$19.99</td>
|
|
<td>25%</td>
|
|
<td>+12</td>
|
|
<td>Dec 10, 2002 5:14 AM</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A33</td>
|
|
<td>Clark</td>
|
|
<td>Kent</td>
|
|
<td>18</td>
|
|
<td>$15.89</td>
|
|
<td>44%</td>
|
|
<td>-26</td>
|
|
<td>Jan 12, 2003 11:14 AM</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A1</td>
|
|
<td>Bruce</td>
|
|
<td>Almighty</td>
|
|
<td>45</td>
|
|
<td>$153.19</td>
|
|
<td>44.7%</td>
|
|
<td>+77</td>
|
|
<td>Jan 18, 2001 9:12 AM</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A102</td>
|
|
<td>Bruce</td>
|
|
<td>Evans</td>
|
|
<td>22</td>
|
|
<td>$13.19</td>
|
|
<td>11%</td>
|
|
<td>-100.9</td>
|
|
<td>Jan 18, 2007 9:12 AM</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A42a</td>
|
|
<td>Bruce</td>
|
|
<td>Evans</td>
|
|
<td>22</td>
|
|
<td>$13.19</td>
|
|
<td>11%</td>
|
|
<td>0</td>
|
|
<td>Jan 18, 2007 9:12 AM</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p class="tip">
|
|
<em>TIP!</em> Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
|
|
</p>
|
|
|
|
|
|
<a id="Getting-Started"></a>
|
|
<h1>Getting started</h1>
|
|
<p>
|
|
To use the tablesorter plugin, include the <a class="external" href="http://jquery.com">jQuery</a>
|
|
library and the tablesorter plugin inside the <code class="hilight"><head></code> tag
|
|
of your HTML document:
|
|
</p>
|
|
|
|
<pre class="html"><script type="text/javascript" src="/path/to/jquery-latest.js"></script>
|
|
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script></pre>
|
|
|
|
|
|
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:</p>
|
|
|
|
<pre class="html"><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>jsmith@gmail.com</td>
|
|
<td>$50.00</td>
|
|
<td>http://www.jsmith.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bach</td>
|
|
<td>Frank</td>
|
|
<td>fbach@yahoo.com</td>
|
|
<td>$50.00</td>
|
|
<td>http://www.frank.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Doe</td>
|
|
<td>Jason</td>
|
|
<td>jdoe@hotmail.com</td>
|
|
<td>$100.00</td>
|
|
<td>http://www.jdoe.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Conway</td>
|
|
<td>Tim</td>
|
|
<td>tconway@earthlink.net</td>
|
|
<td>$50.00</td>
|
|
<td>http://www.timconway.com</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></pre>
|
|
|
|
<p>Start by telling tablesorter to sort your table when the document is loaded:</p>
|
|
|
|
<pre class="js">$(function(){
|
|
$("#myTable").tablesorter();
|
|
});</pre>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<pre class="js">$(function(){
|
|
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
|
|
});</pre>
|
|
|
|
<p class="tip">
|
|
<em>NOTE!</em> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <a href="#Examples">Examples</a>
|
|
</p>
|
|
|
|
<a id="Examples"></a>
|
|
<h1>Examples</h1>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<div class="box">
|
|
<h3>Basic</h3>
|
|
<h4>Sorting</h4>
|
|
<ul>
|
|
<li><a href="example-option-sort-list.html">Set an initial sorting order using options</a></li>
|
|
<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a></li>
|
|
<li><a href="example-option-sort-force.html">Force a default sorting order</a></li>
|
|
<li><a href="example-option-sort-append.html">Append a sort to the selected sorting order</a></li>
|
|
<li><a href="example-child-rows.html">Child rows; how to add rows that sort with their parent row</a></li>
|
|
<li><a href="example-child-rows-filtered.html">Child rows + filter widget; how they work together</a></li>
|
|
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
|
|
<li><a href="example-options-headers.html">Disable sort using headers options</a></li>
|
|
<li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
|
|
<li><a href="example-options-headers-order.html">Set initial sort order using header options</a></li>
|
|
<li><a href="example-option-sortreset-sortrestart.html">Using sortReset & sortRestart options</a></li>
|
|
<li><a href="example-option-sort-empty.html">Sorting empty cells</a> (v2.1.11)</li>
|
|
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li>
|
|
<li><a href="example-option-custom-sort.html">Custom sort script</a> <span class="tip"><em>New!</em></span> v2.2</li>
|
|
<li><a href="example-locale-sort.html">Sorting Accented Characters</a> <span class="tip"><em>New!</em></span> v2.2</li>
|
|
<li><a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies</a> <span class="tip"><em>New!</em></span> v2.2</li>
|
|
<li><a href="example-header-column-span.html">Sorting Across Multiple Columns</a> <span class="tip"><em>New!</em></span> v2.3</li>
|
|
</ul>
|
|
|
|
<h4>Parsers / Extracting Content</h4>
|
|
<ul>
|
|
<li><a href="example-option-digits.html">Dealing with digits!</a></li>
|
|
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> (v2.0.10)</li>
|
|
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> (v2.0.11)</li>
|
|
<li><a href="example-parsers-jquery-data.html">Disable or set the column parser using jQuery Data</a> <span class="tip"><em>New!</em></span> v2.3</li>
|
|
<li><a href="example-option-date-format.html">Changing the date format</a> (v2.0.23)</li>
|
|
<li><a href="example-parsers.html">Parser, writing your own</a></li>
|
|
<li><a href="example-parsers-advanced.html">Parser, writing your own, advanced use</a> (New v2.1)</li>
|
|
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
|
|
</ul>
|
|
|
|
<h4>Widgets / Plugins</h4>
|
|
<ul>
|
|
<li><a href="example-apply-widget.html">Applying widgets</a></li>
|
|
<li><a href="example-widget-columns.html">Columns widget</a> (v2.0.17)</li>
|
|
<li><a href="example-widget-filter.html">Filter widget</a> (v2.0.18)</li>
|
|
<li><a href="example-widget-ui-theme.html">jQuery UI theme widget</a> (v2.0.9)</li>
|
|
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1)</li>
|
|
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
|
|
<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1)</li>
|
|
<li><a href="example-widget-zebra.html">Zebra stripe widget</a></li>
|
|
<li><a href="example-widgets.html">Widgets, writing your own</a></li>
|
|
<li><a href="example-pager.html">Pager plugin</a></li>
|
|
<li><a href="example-pager-ajax.html">Pager plugin - ajax</a> (New v2.1)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<h3>Advanced</h3>
|
|
<h4>Adding / Removing Content</h4>
|
|
<ul>
|
|
<li><a href="example-empty-table.html">Initializing tablesorter on a empty table</a></li>
|
|
<li><a href="example-ajax.html">Appending table data with ajax</a></li>
|
|
<li><a href="example-add-rows.html">Adding a table row</a> (v2.0.16)</li>
|
|
<li><a href="example-update-cell.html">Update the table after cell content has changed</a></li>
|
|
<li><a href="example-pager.html">Pager plugin</a> - examples of how to add and remove rows</li>
|
|
</ul>
|
|
|
|
<h4>Change Header Style</h4>
|
|
<ul>
|
|
<li><a href="example-widget-ui-theme.html">jQuery UI theme widget</a> (v2.0.9)</li>
|
|
<li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</a></li>
|
|
</ul>
|
|
|
|
<br>
|
|
|
|
<h3>Other</h3>
|
|
<h4>Options & Events</h4>
|
|
<ul>
|
|
<li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li>
|
|
<li><a href="example-extending-defaults.html">Extending default options</a></li>
|
|
<li><a href="example-option-debug.html">Enabling debug mode</a></li>
|
|
</ul>
|
|
|
|
<h4>Playgrounds & Other demos</h4>
|
|
<ul>
|
|
<li><a href="http://jsfiddle.net/Mottie/vCTHw/10/">tablesorter basic demo</a> (includes widgets)</li>
|
|
<li><a href="http://jsfiddle.net/Mottie/vCTHw/11/">tablesorter basic demo using jQuery UI theme</a></li>
|
|
<li><a href="http://jsfiddle.net/Mottie/aEL9t/7/">tablesorter basic demo with pager plugin</a></li>
|
|
<li><a href="https://github.com/Mottie/tablesorter/wiki">More demos - added to wiki pages</a></li>
|
|
</ul>
|
|
|
|
<h4>Metadata - setting inline options</h4>
|
|
<ul>
|
|
<li>*Note* you can use class names (version 2.0.11+, <a href="example-parsers-class-name.html">demo</a>), or jQuery data (version 2.3+, <a href="example-parsers-jquery-data.html">demo</a>) instead of meta data</li>
|
|
<li><a href="example-meta-sort-list.html">Set a initial sorting order using metadata.</a></li>
|
|
<li><a href="example-meta-headers.html">Disable header using metadata</a></li>
|
|
<li><a href="example-meta-parsers.html">Setting column parser using metadata</a></li>
|
|
</ul>
|
|
</div>
|
|
<br class="clear">
|
|
|
|
<a id="Configuration"></a>
|
|
<h1>Configuration</h1>
|
|
|
|
<p class="tip">
|
|
tablesorter has many options you can pass in at initialization to achieve different effects<br>
|
|
<em>TIP!</em> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</p>
|
|
|
|
<table id="options" class="tablesorter options">
|
|
<thead>
|
|
<tr>
|
|
<th class="property">Property</th>
|
|
<th class="type">Type</th>
|
|
<th class="defaults">Default</th>
|
|
<th class="descrip">Description</th>
|
|
<th class="examples">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th class="property">Property</th>
|
|
<th class="type">Type</th>
|
|
<th class="defaults">Default</th>
|
|
<th class="descrip">Description</th>
|
|
<th class="examples">Link</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
|
|
<tr id="cancelselection">
|
|
<td><span class="permalink">cancelSelection</span></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="cssasc">
|
|
<td><a href="#" class="toggle2">cssAsc</a></td>
|
|
<td>String</td>
|
|
<td>"tablesorter-headerSortUp"</td>
|
|
<td>The CSS style used to style the header when sorting ascending. Example from the blue skin:
|
|
<div class="collapsible">
|
|
<pre class="css">th.tablesorter-headerSortUp {
|
|
background-color: #8dbdd8;
|
|
background-image: url(black-asc.gif);
|
|
}</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="csschildrow">
|
|
<td><a class="toggle" href="#">cssChildRow</a></td>
|
|
<td>String</td>
|
|
<td>"expand-child"</td>
|
|
<td>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.</td>
|
|
<td>Ex:<a href="example-child-rows.html">1</a> <a href="example-child-rows-filtered.html">2</a></td>
|
|
</tr>
|
|
<tr class="expand-child">
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>This is an entirely new row, but attached to the row above while sorting<br>
|
|
cssChildRow Example HTML:
|
|
<pre class="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="expand-child"> <!-- 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="expand-child"> <!-- 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="expand-child"> <!-- this row will remain attached to the above two rows, and not sort separately -->
|
|
<td colspan="3">
|
|
and it flies!
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</pre>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="cssdesc">
|
|
<td><a href="#" class="toggle2">cssDesc</a></td>
|
|
<td>String</td>
|
|
<td>"tablesorter-headerSortDown"</td>
|
|
<td>The CSS style used to style the header when sorting descending. Example from the blue skin:
|
|
<div class="collapsible">
|
|
<pre class="css">th.tablesorter-headerSortDown {
|
|
background-color: #8dbdd8;
|
|
background-image: url(black-desc.gif);
|
|
}</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="cssheader">
|
|
<td><a href="#" class="toggle2">cssHeader</a></td>
|
|
<td>String</td>
|
|
<td>"tablesorter-header"</td>
|
|
<td>The CSS style used to style the header in its unsorted state. Example from the blue skin:
|
|
<div class="collapsible">
|
|
<pre class="css">th.tablesorter-header {
|
|
background-color: #e6eeee;
|
|
background-image: url(black-bg.gif);
|
|
background-repeat: no-repeat;
|
|
background-position: center right;
|
|
border-collapse: collapse;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
padding: 4px 20px 4px 4px;
|
|
}</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="cssinfoblock">
|
|
<td><a href="#" class="toggle2">cssInfoBlock</a></td>
|
|
<td>String</td>
|
|
<td>"tablesorter-infoOnly"</td>
|
|
<td>All tbodies with this class name will not have its contents sorted. <span class="tip"><em>New!</em></span> v2.2.
|
|
<div class="collapsible">
|
|
<br>
|
|
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.
|
|
<pre class="html"><tbody class="tablesorter-infoOnly">
|
|
<tr>
|
|
<th>The contents of this tbody</th>
|
|
</tr>
|
|
<tr>
|
|
<td>will not be sorted</td>
|
|
</tr>
|
|
</tbody></pre>
|
|
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.
|
|
<br>
|
|
<p class="tip">
|
|
<em>NOTE!</em> 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.
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="selectorremove">
|
|
<td><a href="#" class="toggle2">selectorRemove</a></td>
|
|
<td>String</td>
|
|
<td>"tr.remove-me"</td>
|
|
<td>This CSS class name can be applied to all rows that are to be removed prior to triggering a table update. (New v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
It was necessary to add this option because some widgets add table rows for styling (see the <a href="example-widgets.html">writing custom widgets demo</a>) and if a table update is triggered (<code class="hilight">$('table').trigger('update');</code>) those added rows will automatically become incorporated into the table.
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="dateformat">
|
|
<td><a href="#" class="toggle2">dateFormat</a></td>
|
|
<td>String</td>
|
|
<td>"mmddyyyy"</td>
|
|
<td>Set the date format. Here are the available options. (Modified v2.0.23).
|
|
<div class="collapsible">
|
|
<ul>
|
|
<li><code class="hilight">"mmddyyyy"</code> (default)</li>
|
|
<li><code class="hilight">"ddmmyyyy"</code></li>
|
|
<li><code class="hilight">"yyyymmdd"</code></li>
|
|
</ul>
|
|
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!<br>
|
|
<br>
|
|
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 <a href="example-option-date-format.html">the demo page</a> to see it working.
|
|
<pre class="js">$(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
|
|
}
|
|
|
|
});
|
|
});</pre>
|
|
Individual columns can be modified by adding the following, set in order of priority <span class="tip"><em>Modified!</em></span> v2.3.1:
|
|
<ul>
|
|
<li>jQuery data <code class="hilight">data-dateFormat="mmddyyyy"</code>.</li>
|
|
<li>metadata <code class="hilight">class="{ dateFormat: 'mmddyyyy'}"</code>. This requires the metadata plugin.</li>
|
|
<li>headers option <code class="hilight">headers : { 0 : { dateFormat : 'mmddyyyy' } }</code>.</li>
|
|
<li>header class name <code class="hilight">class="dateFormat-mmddyyyy"</code>.</li>
|
|
<li>Overall <code class="hilight">dateFormat</code> option.</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
<td><a href="example-option-date-format.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="debug">
|
|
<td><span class="permalink">debug</span></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Boolean flag indicating if tablesorter should display debuging information useful for development.
|
|
</td>
|
|
<td><a href="example-option-debug.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="delayinit">
|
|
<td><span class="permalink">delayInit</span></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Setting this option to true will delay parsing of all table cell data until the user initializes a sort. This speeds up the initialization process of very large tables, but the data still needs to be parsed, so the delay is still present upon initial sort.
|
|
</td>
|
|
<td><a href="example-option-debug.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="emptyto">
|
|
<td><a href="#" class="toggle2">emptyTo</a></td>
|
|
<td>String</td>
|
|
<td>"bottom"</td>
|
|
<td>
|
|
Boolean flag indicating how tablesorter should deal with empty table cells. (Modified v2.1.16).
|
|
<div class="collapsible">
|
|
<ul>
|
|
<li><code class="hilight">bottom</code> - sort empty table cells to the bottom.</li>
|
|
<li><code class="hilight">top</code> - sort empty table cells to the top.</li>
|
|
<li><code class="hilight">none</code> or <code class="hilight">zero</code> - sort empty table cells as if the cell has the value equal to zero.</li>
|
|
</ul>
|
|
Individual columns can be modified by adding the following, set in order of priority:
|
|
<ul>
|
|
<li>jQuery data <code class="hilight">data-empty="top"</code>.</li>
|
|
<li>metadata <code class="hilight">class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
|
|
<li>headers option <code class="hilight">headers : { 0 : { empty : 'top' } }</code>.</li>
|
|
<li>header class name <code class="hilight">class="empty-top"</code>.</li>
|
|
<li>Overall <code>emptyTo</code> option.</li>
|
|
</ul>
|
|
<code class="hilight">emptyToBottom</code> option was added in v2.1.11, then replaced by the <code class="hilight">emptyTo</code> option in v2.1.16.
|
|
</div>
|
|
</td>
|
|
<td><a href="example-option-sort-empty.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="headerlist">
|
|
<td><span class="permalink">headerList</span></td>
|
|
<td>Array</td>
|
|
<td>[ ] (empty array)</td>
|
|
<td>Internal list of each header element as selected using jQuery selectors in the <a href="#selectorheaders"><code class="hilight">selectorHeaders</code></a> option. Not really useful for normal usage.</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="headers">
|
|
<td><a href="#" class="toggle2">headers</a></td>
|
|
<td>Object</td>
|
|
<td>null</td>
|
|
<td>
|
|
An object of instructions for per-column controls in the format: <code class="hilight">headers: { 0: { option: setting }, ... }</code>
|
|
<div class="collapsible">
|
|
<br>
|
|
For example, to disable sorting on the first two columns of a table: <code class="hilight">headers: { 0: { sorter: false}, 1: {sorter: false} }</code>.<br>
|
|
<br>
|
|
The plugin attempts to detect the type of data that is contained in a column, but if it can't figure it out then it defaults to alphanumeric. You can easily override this by setting the header argument (or column parser).
|
|
See the full list of <a href="#parsers">default parsers</a> here or <a href="example-parsers.html">write your own</a>.
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
headers: {
|
|
|
|
// See example - Disable first column
|
|
0: { sorter: false },
|
|
|
|
// See example 2: Sort column numerically & treat any text as if its value is:
|
|
1: { sorter: "digit", empty: "top" }, // zero; sort empty cells to the top
|
|
2: { sorter: "digit", string: "max" }, // maximum positive value
|
|
3: { sorter: "digit", string: "min" }, // maximum negative value
|
|
|
|
// Sort the fifth column by date & set the format
|
|
4: { sorter: "shortDate", dateFormat: "yyyymmdd" } // year first format
|
|
|
|
// See example 3: lock the sort order
|
|
// this option will not work if added as metadata
|
|
5: { lockedOrder: "asc" },
|
|
|
|
// See Example 4: Initial sort order direction of seventh column
|
|
6: { sortInitialOrder: "desc" },
|
|
|
|
// Set the filter to false to disable the filter widget in this column
|
|
// See the "Applying the filter widget" demo
|
|
7: { filter: false }
|
|
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td>
|
|
Ex:<a href="example-options-headers.html">1</a>
|
|
<a href="example-options-headers-digits-strings.html">2</a>
|
|
<a href="example-options-headers-locked.html">3</a>
|
|
<a href="example-options-headers-order.html">4</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="ignorecase">
|
|
<td><span class="permalink">ignoreCase</span></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>When true, text sorting will ignore the character case. If false, upper case characters will sort before lower case. <span class="tip"><em>New!</em></span> v2.2.</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="onrenderheader">
|
|
<td><a href="#" class="toggle2">onRenderHeader</a></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>
|
|
This function is called when classes are added to the TH tags. You can use this to modify the HTML in each header tag for additional styling.
|
|
<div class="collapsible">
|
|
<br>
|
|
In versions 2.0.6+, all TH text is wrapped in a span by default. In the example below, the header cell (TH) span is given a class name (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">source</a>).
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
onRenderHeader: function (){
|
|
$(this).find('span').addClass('roundedCorners');
|
|
}
|
|
});
|
|
});</pre>and you'll end up with this HTML (only the thead is shown)<pre class="html"><thead>
|
|
<tr>
|
|
<th class="header"><span class="roundedCorners">Column 1</span></th>
|
|
<th class="header"><span class="roundedCorners">Column 2</span></th>
|
|
</tr>
|
|
</thead></pre></div>
|
|
</td>
|
|
<td><a href="example-option-render-header.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="parsers">
|
|
<td><a href="#" class="toggle2">parsers</a></td>
|
|
<td>Object</td>
|
|
<td>{ }</td>
|
|
<td>Internal list of all of the parsers. Here is a complete list of default parsers:
|
|
<div class="collapsible">
|
|
<br>
|
|
<table class="info"><tbody>
|
|
<tr><th><code class="hilight">sorter: false</code></th><td>disable sort for this column.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "text"</code></th><td>Sort alpha-numerically.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "digit"</code></th><td>Sort numerically.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "currency"</code></th><td>Sort by currency value (supports "£$€¤¥¢").</td></tr>
|
|
<tr><th><code class="hilight">sorter: "ipAddress"</code></th><td>Sort by IP Address.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "url"</code></th><td>Sort by url.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "isoDate"</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD).</td></tr>
|
|
<tr><th><code class="hilight">sorter: "percent"</code></th><td>Sort by percent.</td></tr>
|
|
<tr><th><code class="hilight">sorter: "usLongDate"</code></th><td>Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM).</td></tr>
|
|
<tr><th><code class="hilight">sorter: "shortDate"</code></th><td>Sort by a shorten date (see <a href="#dateformat"><code class="hilight">dateFormat</code></a>).</td></tr>
|
|
<tr><th><code class="hilight">sorter: "time"</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
|
|
<tr><th><code class="hilight">sorter: "metadata"</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
|
|
</tbody></table><br>
|
|
Check out the <a href="#headers"><code class="hilight">headers</code></a> option to see how to use these parsers in your table (example #1).<br>Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3).
|
|
</div>
|
|
</td>
|
|
<td>
|
|
Ex:<a href="example-options-headers-digits-strings.html">1</a>
|
|
<a href="example-parsers-class-name.html">2</a>
|
|
<a href="example-parsers.html">3</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="selectorheaders">
|
|
<td><a href="#" class="toggle2">selectorHeaders</a></td>
|
|
<td>String</td>
|
|
<td>"> thead th"</td>
|
|
<td>jQuery selectors used to find the header cells.
|
|
<div class="collapsible">
|
|
You can change this, but the table will still need the required thead and tbody before this plugin will work properly.
|
|
<br>Added <code class="hilight">></code> to the selector in version 2.3 to prevent targetting nested table headers. <span class="tip"><em>Modified!</em></span> v2.3
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="sortforce">
|
|
<td><a href="#" class="toggle2">sortForce</a></td>
|
|
<td>Array</td>
|
|
<td>null</td>
|
|
<td>Use to add an additional forced sort that is <strong>prepended</strong> to <a href="#sortlist"><code class="hilight">sortList</code></a>.
|
|
<div class="collapsible">
|
|
<br>
|
|
For example, <code class="hilight">sortForce: [[0,0]]</code> will sort the first column in ascending order. After the forced sort, the user selected column(s), or during initialzation, the sorting order defined in the sortList will follow. And lastly, the sort defined in the <a href="#sortappend"><code class="hilight">sortAppend</code></a> option will be applied. More explicitly:<br>
|
|
<br>
|
|
There are three options to determine the sort order and this is the order of priority:
|
|
<ol>
|
|
<li><a href="#sortforce"><code class="hilight">sortForce</code></a> forces the user to have this/these column(s) sorted first (null by default).</li>
|
|
<li><a href="#sortlist"><code class="hilight">SortList</code></a> is the initial sort order of the columns.</li>
|
|
<li><a href="#sortappend"><code class="hilight">SortAppend</code></a> is the default sort that is added to the end of the users sort selection (null by default).</li>
|
|
</ol>
|
|
The value of these sort options is an array of arrays and can include one or more columns. The format is an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where <code class="hilight">columnIndex</code> is a zero-based index for your columns left-to-right and <code class="hilight">sortDirection</code> is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>.
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
sortForce : [[0,0]], // Always sort first column first
|
|
sortList : [[1,0], [2,0]], // initial sort columns (2nd and 3rd)
|
|
sortAppend : [[3,0]] // Always add this sort on the end (4th column)
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-option-sort-force.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortlist">
|
|
<td><a href="#" class="toggle2">sortList</a></td>
|
|
<td>Array</td>
|
|
<td>null</td>
|
|
<td>Use to add an initial sort to the table.
|
|
<div class="collapsible">
|
|
<br>
|
|
The value contains an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>. Please see <a href="#sortforce"><code class="hilight">sortForce</code></a> for more details on other sort order options.<br>
|
|
<br>
|
|
This option can also be set using jQuery data (<span class="tip"><em>New!</em></span> v2.3.1) or metadata on the table:
|
|
<table class="info"><tbody>
|
|
<tr><th>jQuery data</th><td><code><table data-sortlist="[[0,0],[4,0]]"></code></td></tr>
|
|
<tr><th>Meta data</th><td><code><table class="tablesorter {sortlist: [[0,0],[4,0]]}"></code></td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
</td>
|
|
<td><a href="example-option-sort-list.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortappend">
|
|
<td><a href="#" class="toggle2">sortAppend</a></td>
|
|
<td>Array</td>
|
|
<td>null</td>
|
|
<td>Use to add an additional forced sort that will be appended to the dynamic selections by the user.
|
|
<div class="collapsible">
|
|
<br>
|
|
For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.<br>
|
|
<br>
|
|
The value contains an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where <code class="hilight">columnIndex</code> is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>. Please see <a href="#sortforce"><code class="hilight">sortForce</code></a> for more details on other sort order options.
|
|
</div>
|
|
</td>
|
|
<td><a href="example-option-sort-append.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortinitialorder">
|
|
<td><a href="#" class="toggle2">sortInitialOrder</a></td>
|
|
<td>String</td>
|
|
<td>"asc"</td>
|
|
<td>
|
|
The direction a column sorts when clicking the header for the first time. Valid arguments are <code class="hilight">"asc"</code> for Ascending or <code class="hilight">"desc"</code> for Descending.<br>
|
|
<div class="collapsible">
|
|
<br>
|
|
This order can also be set by desired column using the <a href="#headers"><code class="hilight">headers</code></a> option (Added in v2.0.8).<br>
|
|
<br>
|
|
Individual columns can be modified by adding the following, set in order of priority <span class="tip"><em>Modified!</em></span> v2.3.1:
|
|
<ul>
|
|
<li>jQuery data <code class="hilight">data-sortInitialOrder="asc"</code>.</li>
|
|
<li>metadata <code class="hilight">class="{ sortInitialOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
|
|
<li>headers option <code class="hilight">headers : { 0 : { sortInitialOrder : 'asc' } }</code>.</li>
|
|
<li>header class name <code class="hilight">class="sortInitialOrder-asc"</code>.</li>
|
|
<li>Overall <code class="hilight">sortInitialOrder</code> option.</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
<td>Ex:<a href="example-option-sort-order.html">1</a> <a href="example-options-headers-order.html">2</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortlocalecompare">
|
|
<td><a href="#" class="toggle2">sortLocaleCompare</a></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Boolean flag indicating if certain accented characters within the table will be replaced with their equivalent characters. <span class="tip"><em>Modified!</em></span> v2.2.
|
|
<div class="collapsible">
|
|
<ul>
|
|
<li>This option no longer switches the sort to use the <code class="hilight">String.localeCompare</code> method.</li>
|
|
<li>When this option is <code class="hilight">true</code>, the text parsed from table cells will convert accented characters to their equivalent to allow the alphanumeric sort to properly sort.</li>
|
|
<li>If <code class="hilight">false</code> (default), any accented characters are treated as their value in the standard unicode order.</li>
|
|
<li>The following characters are replaced for both upper and lower case (information obtained from <a href="http://sugarjs.com/sorting">sugar.js sorting equivalents</a> table):
|
|
<ul>
|
|
<li><code class="hilight">áàâãä</code> replaced with <code class="hilight">a</code></li>
|
|
<li><code class="hilight">ç</code> replaced with <code class="hilight">c</code></li>
|
|
<li><code class="hilight">éèêë</code> replaced with <code class="hilight">e</code></li>
|
|
<li><code class="hilight">íìİîï</code> replaced with <code class="hilight">i</code></li>
|
|
<li><code class="hilight">óòôõö</code> replaced with <code class="hilight">o</code></li>
|
|
<li><code class="hilight">úùûü</code> replaced with <code class="hilight">u</code></li>
|
|
<li><code class="hilight">ß</code> replaced with <code class="hilight">S</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>Please see the example page for instrcutions on how to modify the above equivalency table.</li>
|
|
<li>If you would like to continuing using the <code class="hilight">String.localeCompare</code> method, then set the <code class="hilight">sortLocaleCompare</code> option to <code class="hilight">false</code> and use the new <a href="#textsorter"><code class="hilight">textSorter</code></a> option as follows:
|
|
<pre class="js">$('table').tablesorter({
|
|
textSorter: function(a,b) {
|
|
return a.localeCompare(b);
|
|
}
|
|
});</pre></li>
|
|
</ul>
|
|
<del>Boolean flag indicating whenever to use javascript <code class="hilight">String.localeCompare</code> method or not.<br>
|
|
This is only used when comparing text with international character strings. A sort using localeCompare will sort accented characters the same as their unaccented counterparts.</del>
|
|
</div>
|
|
</td>
|
|
<td><a href="example-locale-sort.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortreset">
|
|
<td><span class="permalink">sortReset</span></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Setting this option to <code class="hilight">true</code> will allow you to click on the table header a third time to reset the sort direction. (New v2.0.27).
|
|
</td>
|
|
<td><a href="example-option-sortreset-sortrestart.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortrestart">
|
|
<td><span class="permalink">sortRestart</span></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Setting this option to <code class="hilight">true</code> will start the sort with the <a href="#sortinitialorder"><code class="hilight">sortInitialOrder</code></a> when clicking on a previously unsorted column. (New v2.0.31).
|
|
</td>
|
|
<td><a href="example-option-sortreset-sortrestart.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortmultisortkey">
|
|
<td><span class="permalink">sortMultiSortKey</span></td>
|
|
<td>String</td>
|
|
<td>"shiftKey"</td>
|
|
<td>The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are <code class="hilight">"ctrlKey"</code> or <code class="hilight">"altKey"</code>. Reference: <a class="external" href="https://developer.mozilla.org/en/DOM/MouseEvent">https://developer.mozilla.org/en/DOM/MouseEvent</a></td>
|
|
<td><a href="example-option-sort-key.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="stringto">
|
|
<td><a href="#" class="toggle2">stringTo</a></td>
|
|
<td>String</td>
|
|
<td>"max"</td>
|
|
<td>
|
|
Boolean flag indicating how tablesorter should deal with text inside of numerically sorted columns. (New v2.1.16).
|
|
<div class="collapsible"><br>
|
|
String options was initially set in the header options only. Overall option added and values changed in version 2.1.16; setting the value to:
|
|
<ul>
|
|
<li><code class="hilight">"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
|
|
<li><code class="hilight">"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
|
|
<li><code class="hilight">"top"</code> will always sort the text to the top of the column.</li>
|
|
<li><code class="hilight">"bottom"</code> will always sort the text to the bottom of the column.</li>
|
|
<li><code class="hilight">"none"</code> or <code class="hilight">"zero"</code> will treat the text as if it has a value of zero.</li>
|
|
</ul>
|
|
Individual columns can be modified by adding the following, set in order of priority:
|
|
<ul>
|
|
<li>jQuery data <code class="hilight">data-string="top"</code>.</li>
|
|
<li>metadata <code class="hilight">class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
|
|
<li>headers option <code class="hilight">headers : { 0 : { string : 'top' } }</code>.</li>
|
|
<li>header class name <code class="hilight">class="string-top"</code>.</li>
|
|
<li>Overall <code class="hilight">stringTo</code> option.</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
<td><a href="example-options-headers-digits-strings.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="tableClass">
|
|
<td><a href="#" class="toggle2">tableClass</a></td>
|
|
<td>String</td>
|
|
<td>"tablesorter"</td>
|
|
<td>This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.
|
|
<div class="collapsible">
|
|
<br>Change this option if you are not using the default css, or if you are using a completely custom stylesheet.
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="textextraction">
|
|
<td><a href="#" class="toggle2">textExtraction</a></td>
|
|
<td>String Or Function</td>
|
|
<td>"simple"</td>
|
|
<td>Defines which method is used to extract data from a table cell for sorting.
|
|
The built-in option is <code class="hilight">"simple"</code> which is the equivalent of doing this inside of the textExtraction function: <code class="hilight">$(node).text();</code>.
|
|
<div class="collapsible">
|
|
<br>
|
|
You can customize the text extraction by writing your own text extraction function "myTextExtraction" which you define like:
|
|
<pre class="js">var myTextExtraction = function(node, table, cellIndex){
|
|
// extract data from markup and return it
|
|
// originally: return node.childNodes[0].childNodes[0].innerHTML;
|
|
return $(node).find('selector').text();
|
|
}
|
|
$(function(){
|
|
$("#myTable").tableSorter( { textExtraction: myTextExtraction } );
|
|
});</pre>
|
|
tablesorter will pass the current table cell object for you to parse and return. Thanks to Josh Nathanson for the examples. Updated to a jQuery example by Rob G (Mottie).
|
|
<p>Now if the text you are finding in the script above is say a number, then just include the <a href="#headers"><code class="hilight">headers</code></a> sorter option to specify how to sort it. Also in this example, we will specify that the special textExtraction code is only needed for the second column ("1" because we are using a zero-based index). All other columns will ignore this textExtraction function.</p>
|
|
<p>Added <code class="hilight">table</code> and <code class="hilight">cellIndex</code> variables to the <code class="hilight">textExtraction</code> function in version 2.1.2.</p>
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
textExtraction: {
|
|
1: function(node, table, cellIndex) {
|
|
return $(node).find("span:last").text();
|
|
}
|
|
},
|
|
headers: {
|
|
1: { sorter : "digit" }
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-option-text-extraction.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="textsorter">
|
|
<td><a href="#" class="toggle2">textSorter</a></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>
|
|
Replace the default sorting algorithm with a custom one using this option.
|
|
<div class="collapsible">
|
|
<br>
|
|
Include a script like <a href="https://github.com/overset/javascript-natural-sort">naturalSort.js</a> as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
textSorter : naturalSort
|
|
});
|
|
});</pre>
|
|
or use the localeCompare sort
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
textSorter: function(a,b) {
|
|
return a.localeCompare(b);
|
|
}
|
|
});
|
|
});</pre>There's no need to worry about reverse sorting, it's taken care of by the plugin.
|
|
</div>
|
|
</td>
|
|
<td><a href="example-option-custom-sort.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="usnumberformat">
|
|
<td><a href="#" class="toggle2">usNumberFormat</a></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>
|
|
Indicates how tablesorter should deal with a numerical format: (New v2.1.3).
|
|
<div class="collapsible">
|
|
<table class="info"><tbody>
|
|
<tr>
|
|
<th><code class="hilight">true</code></th>
|
|
<td class="right">U.S.</td>
|
|
<td><code class="hilight">1,234,567.89</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th><code class="hilight">false</code></th>
|
|
<td class="right">German:<br>French:</td>
|
|
<td><code class="hilight">1.234.567,89</code><br><code class="hilight">1 234 567,89</code></td>
|
|
</tr>
|
|
</tbody></table>
|
|
</div>
|
|
</td>
|
|
<td><a href="../index.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widgets">
|
|
<td><span class="permalink">widgets</span></td>
|
|
<td>Array</td>
|
|
<td>[ ] (empty array)</td>
|
|
<td>
|
|
Initialize widgets using this option ( e.g. <code class="hilight">widgets : ['zebra']</code>, or custom widgets <code class="hilight">widgets: ['zebra', 'myCustomWidget'];</code>, see <a href="example-widgets.html">this demo</a> on how to write your own custom widget ).
|
|
</td>
|
|
<td><a href="example-widget-zebra.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widthfixed">
|
|
<td><span class="permalink">widthFixed</span></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion.
|
|
<br><del>Requires the <a href="#Download-Addons">jQuery dimension plugin</a> to work.</del> This is now part of the jQuery core.
|
|
</td>
|
|
<td><a href="example-pager.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widgetoptions">
|
|
<td><a href="#" class="toggle2">widgetOptions</a></td>
|
|
<td>Object</td>
|
|
<td>{ }</td>
|
|
<td>
|
|
As of version 2.1, all widget options have been moved into this option. This is a move to store all widget specific options in one place so as not to polute the main table options. All current widgets have been modified to use this new option. (New v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Previously documented widget options <a href="#widgetzebra"><code class="hilight">widgetZebra</code></a>, <a href="#widgetcolumns"><code class="hilight">widgetColumns</code></a> and <a href="#widgetuitheme"><code class="hilight">widgetUitheme</code></a> will be retained for backwards compatibility.<br>
|
|
<br>
|
|
Use the <a href="#widgetoptions"><code class="hilight">widgetOptions</code></a> option as follows, please note that each option is followed by a comma (except the last one):
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
|
|
// initialize a bunch of widgets
|
|
widgets: ["zebra", "uitheme", "columns", "filter", "stickyHeaders"],
|
|
|
|
widgetOptions: {
|
|
|
|
// zebra widget: adding zebra striping, using content and default styles - the ui css removes the background
|
|
// from default even and odd class names included for this demo to allow switching themes
|
|
// [ "even", "odd" ]
|
|
zebra : ["ui-widget-content even", "ui-state-default odd"],
|
|
|
|
// uitheme widget: change default uitheme icons
|
|
// find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
|
|
// default icons: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"]
|
|
// ["up/down arrow (cssHeaders/unsorted)","down arrow (cssDesc/descending)","up arrow (cssAsc/ascending)"]
|
|
uitheme : ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"],
|
|
|
|
// columns widget: change the default column class names
|
|
// primary is the first column sorted, secondary is the second, etc
|
|
columns : [ "primary", "secondary", "tertiary" ],
|
|
|
|
// filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option)
|
|
// and this option is true and a match is found anywhere in the child row, then it will make that row
|
|
// visible; default is false
|
|
filter_childRows : false,
|
|
|
|
// filter widget: css class applied to the table row containing the filters & the inputs within that row
|
|
filter_cssFilter : "tablesorter-filter",
|
|
|
|
// filter widget: Set this option to true to use the filter to find text from the start of the column
|
|
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
|
filter_startsWith : false,
|
|
|
|
// stickyHeaders widget: css class name applied to the sticky header
|
|
stickyHeaders : "tablesorter-stickyHeader"
|
|
|
|
}
|
|
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-zebra.html">Example</a></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<!-- non-sorting tbody -->
|
|
<tbody class="tablesorter-infoOnly">
|
|
<tr><th colspan="5">Deprecated Options</th></tr>
|
|
</tbody>
|
|
|
|
<tbody>
|
|
<tr id="widgetcolumns">
|
|
<td><a href="#" class="toggle2 deprecated">widgetColumns</a></td>
|
|
<td>Object with Array</td>
|
|
<td>{ css:[ "primary", "secondary", "tertiary" ] }</td>
|
|
<td>
|
|
This option is being <span class="deprecated">deprecated</span>!
|
|
It has been replaced by <a href="#widget-columns"><code class="hilight">widgetOptions.columns</code></a>; but is still available for backwards compatibility.
|
|
<div class="collapsible">
|
|
<br>
|
|
When the column styling widget is initialized, it automatically applied the default class names of <code class="hilight">"primary"</code> for the primary sort, <code class="hilight">"secondary"</code> for the next sort, <code class="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... (New v2.0.17).
|
|
Use the <a href="#widgetcolumns"><code class="hilight">widgetColumns</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["columns"], // initialize column styling of the table
|
|
widgetColumns: { css: ["primary", "secondary", "tertiary" ] }
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="widgetuitheme">
|
|
<td><a href="#" class="toggle2 deprecated">widgetUitheme</a></td>
|
|
<td>Object with Array</td>
|
|
<td>{ css: [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] }</td>
|
|
<td>
|
|
This option is being <span class="deprecated">deprecated</span>!
|
|
It has been replaced by <a href="#widget-uitheme"><code class="hilight">widgetOptions.uitheme</code></a>; but is still available for backwards compatibility.
|
|
<div class="collapsible">
|
|
<br>
|
|
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <code class="hilight">"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code class="hilight">"ui-icon-arrowthick-1-s"</code> for the descending sort and <code class="hilight">"ui-icon-arrowthick-1-n"</code> for the ascending sort. (New v2.0.9).
|
|
Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
|
|
<br>
|
|
Use the <a href="#widgetuitheme"><code class="hilight">widgetUitheme</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["uitheme"], // initialize ui theme styling widget of the table
|
|
widgetUitheme: {
|
|
css: [
|
|
"ui-icon-carat-2-n-s", // Unsorted icon
|
|
"ui-icon-carat-1-s", // Sort up (down arrow)
|
|
"ui-icon-carat-1-n" // Sort down (up arrow)
|
|
]
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="widgetzebra">
|
|
<td><a href="#" class="toggle2 deprecated">widgetZebra</a></td>
|
|
<td>Object with Array</td>
|
|
<td>{ css: [ "even", "odd" ] }</td>
|
|
<td>
|
|
This option is being <span class="deprecated">deprecated</span>!
|
|
It has been replaced by <a href="#widget-zebra"><code class="hilight">widgetOptions.zebra</code></a>; but is still available for backwards compatibility.
|
|
<div class="collapsible">
|
|
<br>
|
|
When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>.
|
|
Use the <a href="#widgetzebra"><code class="hilight">widgetZebra</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["zebra"], // initialize zebra striping of the table
|
|
widgetZebra: { css: [ "normal-row", "alt-row" ] }
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a id="Widget-options"></a>
|
|
<h1>Widget Options</h1>
|
|
|
|
<p class="tip">
|
|
tablesorter widgets have many options, and to better organize them, they now are grouped together inside of the <code class="hilight">widgetOptions</code><br>
|
|
<em>TIP!</em> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</p>
|
|
|
|
<table id="widget-options" class="tablesorter options">
|
|
<thead>
|
|
<tr>
|
|
<th class="property">Property</th>
|
|
<th class="type">Type</th>
|
|
<th class="defaults">Default</th>
|
|
<th class="descrip">Description</th>
|
|
<th class="examples">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th class="property">Property</th>
|
|
<th class="type">Type</th>
|
|
<th class="defaults">Default</th>
|
|
<th class="descrip">Description</th>
|
|
<th class="examples">Link</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
|
|
<tr id="widget-columns">
|
|
<td><a href="#" class="toggle2">columns</a></td>
|
|
<td>Array</td>
|
|
<td>[ "primary", "secondary", "tertiary" ]</td>
|
|
<td>
|
|
columns widget: When the column styling widget is initialized, it automatically applied the default class names of <code class="hilight">"primary"</code> for the primary sort, <code class="hilight">"secondary"</code> for the next sort, <code class="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... (Modified v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-columns"><code class="hilight">"columns"</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["columns"], // initialize column styling of the table
|
|
widgetOptions : {
|
|
columns: [ "primary", "secondary", "tertiary" ]
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-columns.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widget-filter-childrows">
|
|
<td><a href="#" class="toggle2">filter_childRows</a></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Filter widget: If there are child rows in the table (rows with class name from <a href="#csschildrow"><code class="hilight">"cssChildRow"</code></a> option) and this option is <code class="hilight">true</code> and a match is found anywhere in the child row, then it will make that row visible.
|
|
(Modified v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-filter-childrows"><code class="hilight">filter_childRows</code></a> option include child row text as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["filter"],
|
|
widgetOptions : {
|
|
filter_childRows : true
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="widget-filter-cssfilter">
|
|
<td><a href="#" class="toggle2">filter_cssFilter</a></td>
|
|
<td>String</td>
|
|
<td>'tablesorter-filter'</td>
|
|
<td>
|
|
Filter widget: This is the class name applied to the filter header row (tr) and each input within that row. If you change it from the default class name of <code class="hilight">"tablesorter-filter"</code> make sure you also update the css!
|
|
(New v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-filter-cssfilter"><code class="hilight">"tablesorter-filter"</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["filter"],
|
|
widgetOptions : {
|
|
// css class applied to the table row containing the filters & the inputs within that row
|
|
filter_cssFilter : "tablesorter-filter"
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-filter.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widget-filter-startswith">
|
|
<td><a href="#" class="toggle2">filter_startsWith</a></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Filter widget: Set this option to <code class="hilight">true</code> to use the filter to find text from the start of the column, so typing in "a" will find "albert" but not "frank", both have a's. (New v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-filter-startswith"><code class="hilight">filter_startsWith</code></a> option as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["filter"],
|
|
widgetOptions : {
|
|
filter_startsWith : true
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-filter.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widget-sticky-headers">
|
|
<td><a href="#" class="toggle2">stickyHeaders</a></td>
|
|
<td>String</td>
|
|
<td>'tablesorter-stickyHeader'</td>
|
|
<td>
|
|
stickyHeaders widget: This is the class name applied to the sticky header row (tr). If you change it from the default class name of <code class="hilight">"tablesorter-stickyHeader"</code> make sure you also update the css! (New v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-sticky-headers"><code class="hilight">"stickyHeaders"</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["stickyHeaders"],
|
|
widgetOptions : {
|
|
// css class name applied to the sticky header
|
|
stickyHeaders : "tablesorter-stickyHeader"
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-sticky-header.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widget-uitheme">
|
|
<td><a href="#" class="toggle2">uitheme</a></td>
|
|
<td>Array</td>
|
|
<td>[ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ]</td>
|
|
<td>
|
|
uitheme widget: This widget option replaces the previous <a href="#widgetuitheme">widgetUitheme</a>. It is used when the ui theme styling widget is initialized. It automatically applies the default class names of <code class="hilight">"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code class="hilight">"ui-icon-arrowthick-1-s"</code> for the descending sort and <code class="hilight">"ui-icon-arrowthick-1-n"</code> for the ascending sort. (Modified v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
|
|
<br>
|
|
Use the <a href="#widgetuitheme"><code class="hilight">"widgetUitheme"</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["uitheme"], // initialize ui theme styling widget of the table
|
|
widgetOptions: {
|
|
uitheme : [
|
|
"ui-icon-carat-2-n-s", // Unsorted icon
|
|
"ui-icon-carat-1-s", // Sort up (down arrow)
|
|
"ui-icon-carat-1-n" // Sort down (up arrow)
|
|
]
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-ui-theme.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widget-zebra">
|
|
<td><a href="#" class="toggle2">zebra</a></td>
|
|
<td>Array</td>
|
|
<td>[ "even", "odd" ]</td>
|
|
<td>
|
|
zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>. (Modified v2.1).
|
|
<div class="collapsible">
|
|
<br>
|
|
Use the <a href="#widget-zebra"><code class="hilight">"zebra"</code></a> option to change the css class name as follows:
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
widgets: ["zebra"], // initialize zebra striping of the table
|
|
widgetOptions: {
|
|
zebra: [ "normal-row", "alt-row" ]
|
|
}
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-zebra.html">Example</a></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a id="Methods"></a>
|
|
<h1>Methods</h1>
|
|
|
|
<p class="tip">
|
|
tablesorter has some methods available to allow updating, resorting or applying widgets to a table after it has been initialized.
|
|
<br>
|
|
<em>TIP!</em> Click on the link in the method column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</p>
|
|
|
|
<table id="methods" class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Method</th>
|
|
<th>Description</th>
|
|
<th>Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="addrows">
|
|
<td><a href="#" class="toggle2">addRows</a></td>
|
|
<td>Use this method to add table rows. (New v2.0.16).
|
|
<div class="collapsible">
|
|
It does not work the same as "update" in that it only adds rows, it does not remove them.<br>
|
|
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.
|
|
<pre class="js">// 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.
|
|
resort = true;
|
|
$('table')
|
|
.find('tbody').append($row)
|
|
.trigger('addRows', [$row, resort]);</pre></div>
|
|
</td>
|
|
<td><a href="example-add-rows.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sorton">
|
|
<td><a href="#" class="toggle2">sorton</a></td>
|
|
<td>Use this method to sort an initialized table in the desired order.
|
|
<div class="collapsible">
|
|
<pre class="js">// Choose a new sort order
|
|
var sort = [[0,0],[2,0]];
|
|
// Note that the sort value below is inside of another array (inside another set of square brackets)
|
|
$("table").trigger("sorton", [sort]);</pre></div>
|
|
</td>
|
|
<td><a href="example-trigger-sort.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="update">
|
|
<td><a href="#" class="toggle2">update</a></td>
|
|
<td>Update the stored tablesorter data and the table.
|
|
<div class="collapsible">
|
|
<pre class="js">// 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
|
|
var resort = true;
|
|
$("table").trigger("update", [resort]);
|
|
|
|
// 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 = [[2,1],[0,0]];
|
|
$("table").trigger("sorton", [sorting]);</pre></div>
|
|
</td>
|
|
<td><a href="example-ajax.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="appendcache">
|
|
<td><a href="#" class="toggle2">appendCache</a></td>
|
|
<td>Update a table that has had its data dynamically changed; used in conjunction with "update".<br>
|
|
<div class="collapsible">
|
|
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".<br>
|
|
<br>
|
|
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.
|
|
<pre class="js">// Table data was just dynamically changed (more than one cell)
|
|
$("table")
|
|
.trigger("update")
|
|
.trigger("appendCache");</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="updatecell">
|
|
<td><a href="#" class="toggle2">updateCell</a></td>
|
|
<td>Update a table cell in the tablesorter data.
|
|
<div class="collapsible">
|
|
<pre class="js">$(function() {
|
|
$("table").tablesorter();
|
|
|
|
$("td.discount").click(function(){
|
|
|
|
// randomize a number
|
|
var resort = false,
|
|
discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' +
|
|
('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);
|
|
$(this).text(discount);
|
|
|
|
// update the table, so the tablesorter plugin knows 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]);
|
|
|
|
// 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;
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-update-cell.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="applywidgetid">
|
|
<td><a href="#" class="toggle2">applyWidgetId</a></td>
|
|
<td>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.
|
|
<div class="collapsible">
|
|
<pre class="js">$(function(){
|
|
// initialize tablesorter without the widget
|
|
$("table").tablesorter();
|
|
|
|
// click a button to apply the zebra striping
|
|
$("button").click(function(){
|
|
$('table').trigger('applyWidgetId', ['zebra']);
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-apply-widget.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="applywidgets">
|
|
<td><a href="#" class="toggle2">applyWidgets</a></td>
|
|
<td>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.
|
|
<div class="collapsible">
|
|
<pre class="js">// Update the list of widgets to apply to the table (add or remove)
|
|
$("table").data("tablesorter").widgets = ["zebra"];
|
|
|
|
// This method applies the widget - no need to keep updating
|
|
$('table').trigger('applyWidgets');
|
|
}); </pre></div>
|
|
</td>
|
|
<td><a href="example-apply-widget.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="destroy">
|
|
<td><a href="#" class="toggle2">destroy</a></td>
|
|
<td>Use this method to remove tablesorter from the table.
|
|
<div class="collapsible">
|
|
<pre class="js">// Remove tablesorter and all classes
|
|
$("table").trigger("destroy");
|
|
|
|
// Remove tablesorter and all classes but the "tablesorter" class on the table
|
|
$("table").trigger("destroy", [false];</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a id="Events"></a>
|
|
<h1>Events</h1>
|
|
|
|
<p class="tip">
|
|
tablesorter has some methods available to allow updating, resorting or applying widgets to a table after it has been initialized.
|
|
<br>
|
|
<em>TIP!</em> Click on the link in the event column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</p>
|
|
|
|
<table id="events" class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Event</th>
|
|
<th>Description</th>
|
|
<th>Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="sortstart">
|
|
<td><a href="#" class="toggle2">sortStart</a></td>
|
|
<td>This event fires when tablesorter is about to start resorting the table.
|
|
<div class="collapsible">
|
|
<pre class="js">$(function(){
|
|
|
|
// initialize the tablesorter plugin
|
|
$("table").tablesorter();
|
|
|
|
// bind to sort events
|
|
$("table")
|
|
.bind("sortStart",function() {
|
|
$("#overlay").show();
|
|
})
|
|
.bind("sortEnd",function() {
|
|
$("#overlay").hide();
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-triggers.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="sortend">
|
|
<td><a href="#" class="toggle2">sortEnd</a></td>
|
|
<td>This event fires when tablesorter has completed resorting the table.
|
|
<div class="collapsible">
|
|
<pre class="js">$(function(){
|
|
|
|
// initialize the tablesorter plugin
|
|
$("table").tablesorter();
|
|
|
|
// bind to sort events
|
|
$("table")
|
|
.bind("sortStart",function() {
|
|
$("#overlay").show();
|
|
})
|
|
.bind("sortEnd",function() {
|
|
$("#overlay").hide();
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-triggers.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="pagerChange">
|
|
<td><a href="#" class="toggle2">pagerChange</a></td>
|
|
<td>This event fires when the pager plugin begins to render the table on the currently selected page. (New v2.0.7).
|
|
<div class="collapsible">
|
|
<pre class="js">$(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) );
|
|
});
|
|
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-pager.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="pagerComplete">
|
|
<td><a href="#" class="toggle2">pagerComplete</a></td>
|
|
<td>This event fires when the pager plugin has completed its render of the table on the currently selected page. (New v2.0.7).
|
|
<div class="collapsible">
|
|
<pre class="js">$(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) );
|
|
});
|
|
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-pager.html">Example</a></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a id="Download"></a>
|
|
<h1>Download</h1>
|
|
|
|
<p><strong>Full release</strong> - Plugin, Documentation, Add-ons, Themes. Download: <a class="download zip" href="https://github.com/Mottie/tablesorter/zipball/master">zip</a> or <a class="download tar" href="https://github.com/Mottie/tablesorter/tarball/master">tar.gz</a></p>
|
|
|
|
<p><strong>Pick n choose</strong> - Place at least the required files in a directory on your webserver that is accessible to a web browser. Record this location.</p>
|
|
|
|
<strong id="Download-Required">Required:</strong>
|
|
<ul>
|
|
<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.6 or higher; some demos need jQuery 1.4.2+)</li>
|
|
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (19kb, minified for production - please put the file on your server)</li>
|
|
</ul>
|
|
|
|
<strong id="Download-Addons">Optional / Add-Ons:</strong>
|
|
<ul>
|
|
<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (6kb, required for setting <a href="#Examples">inline options</a>)</li>
|
|
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (35kb/<a href="../js/jquery.tablesorter.min.js">19kb min</a>)</li>
|
|
<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (14kb/<a href="../addons/pager/jquery.tablesorter.pager.min.js">7kb min</a>, <a href="example-pager.html">demo</a>)</li>
|
|
<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (16kb/<a href="../js/jquery.tablesorter.widgets.min.js">8kb min</a>, includes the jQuery UI theme, columns styling, resizable columns, filter, sticky header and save sort widgets. (Updated v2.1)</li>
|
|
</ul>
|
|
|
|
<strong id="Download-Themes">Themes:</strong>
|
|
<ul>
|
|
<li><a href="../css/green/green.zip">Green Skin</a> - Images and CSS styles for green themed headers</li>
|
|
<li><a href="../css/blue/blue.zip">Blue Skin</a> - Images and CSS styles for blue themed headers (as seen in the examples)</li>
|
|
<li><a href="example-widget-ui-theme.html">jQuery UI Theme</a> - Apply any jQuery UI theme to the table using the "uitheme" widget code. (New v2.0.9).</li>
|
|
</ul>
|
|
|
|
<a id="Compatibility"></a>
|
|
<h1>Browser Compatibility</h1>
|
|
|
|
<p>tablesorter has been tested successfully in the following browsers with Javascript enabled:</p>
|
|
<ul>
|
|
<li>Firefox 2+</li>
|
|
<li>Internet Explorer 6+</li>
|
|
<li>Safari 2+</li>
|
|
<li>Opera 9+</li>
|
|
<li>Konqueror</li>
|
|
</ul>
|
|
|
|
<p><a class="external" href="http://docs.jquery.com/Browser_Compatibility">jQuery Browser Compatibility</a></p>
|
|
|
|
<a id="Support"></a>
|
|
<h1>Support</h1>
|
|
|
|
<p>If you are having a problem with the plugin or you want to submit a feature request, please <a href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
|
|
|
|
<p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
|
|
|
|
<p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a>.</p>
|
|
|
|
<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
|
|
|
|
<a id="Credits"></a>
|
|
<h1>Credits</h1>
|
|
<p>Written by Christian Bach.</p>
|
|
<p>
|
|
Documentation written by <a class="external" href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
|
|
based on <a class="external" href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>
|
|
Missing documentation, alphanumeric sort, numerous widgets and other changes added by <a class="external" href="https://github.com/Mottie/tablesorter">Mottie</a>.
|
|
</p>
|
|
<p>
|
|
<a class="external" href="http://ejohn.org">John Resig</a> for the fantastic <a class="external" href="http://jquery.com">jQuery</a>
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|