<em>Update!</em> New version!, and the tablesorter docs are now available in russian, head over to <aclass="external"href="http://tablesorter.ru/docs/">tablesorter.ru</a>
<em>Helping out!</em> If you like tablesorter and you're feeling generous, take a look at my <aclass="external"href="http://www.amazon.com/gp/registry/wishlist/3VAOWCL63NEA6/ref=wl_web/">Amazon Wish List</a> or make a donation.
<inputtype="image"src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif"border="0"name="submit"alt="PayPal - The safer, easier way to pay online!">
<inputtype="image"src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif"border="0"name="submit"alt="Make payments with PayPal - it's fast, free and secure!">
<li>Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. <ahref="example-parsers.html">Add your own easily</a></li>
<em>NOTE!</em> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <ahref="#Examples">Examples</a>
<li><ahref="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a><spanclass="tip"><em>New! v2.0.10</em></span></li>
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 <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all)
<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>
<trid="cssasc">
<td><ahref="#"class="toggle2">cssAsc</a></td>
<td>String</td>
<td>"headerSortUp"</td>
<td>The CSS style used to style the header when sorting ascending. Example from the blue skin:
<divclass="collapsible">
<preclass="css">th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;
}</pre></div>
</td>
<td></td>
</tr>
<trid="csschildrow">
<td><aclass="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>
<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>
<trid="cssdesc">
<td><ahref="#"class="toggle2">cssDesc</a></td>
<td>String</td>
<td>"headerSortDown"</td>
<td>The CSS style used to style the header when sorting descending. Example from the blue skin:
<divclass="collapsible">
<preclass="css">th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;
}</pre></div>
</td>
<td></td>
</tr>
<trid="cssheader">
<td><ahref="#"class="toggle2">cssHeader</a></td>
<td>String</td>
<td>"header"</td>
<td>The CSS style used to style the header in its unsorted state. Example from the blue skin:
<divclass="collapsible">
<preclass="css">th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}</pre></div>
</td>
<td></td>
</tr>
<trid="dateformat">
<td><ahref="#"class="toggle2">dateFormat</a></td>
<td>String</td>
<td>"us"</td>
<td>Set the date format. Here are the available options:
<divclass="collapsible">
<ul>
<li><codeclass="hilight">"us"</code> (default) - "mm-dd-yyyy" or "mm/dd/yyyy"</li>
<li><codeclass="hilight">"uk"</code> - "dd-mm-yyyy" or "dd/mm/yyyy"</li>
<li><codeclass="hilight">"dd/mm/yy"</code> or <codeclass="hilight">"dd-mm-yy"</code> - Sort by short year (it appears to sort by day first, not the year)</li>
</ul>
</div>
</td>
<td></td>
</tr>
<trid="debug">
<td>debug</td>
<td>Boolean</td>
<td>false</td>
<td>
Boolean flag indicating if tablesorter should display debuging information usefull for development.
<td>Internal list of each header element as selected using jQuery selectors in the <ahref="#selectorheaders"><codeclass="hilight">selectorHeaders</code></a> option. Not really useful for normal usage.</td>
<td></td>
</tr>
<trid="headers">
<td><ahref="#"class="toggle2">headers</a></td>
<td>Object</td>
<td>null</td>
<td>
An object of instructions for per-column controls in the format: <codeclass="hilight">headers: { 0: { option: setting }, ... }</code>
<divclass="collapsible">
<br>
For example, to disable sorting on the first two columns of a table: <codeclass="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).
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.
<divclass="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 (<ahref="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">source</a>).
<preclass="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)<preclass="html"><thead>
<tr><th><codeclass="hilight">sorter: "currency"</code></th><td>Sort by currency value (supports "£$€").</td></tr>
<tr><th><codeclass="hilight">sorter: "ipAddress"</code></th><td>Sort by IP Address.</td></tr>
<tr><th><codeclass="hilight">sorter: "url"</code></th><td>Sort by url.</td></tr>
<tr><th><codeclass="hilight">sorter: "isoDate"</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD).</td></tr>
<tr><th><codeclass="hilight">sorter: "percent"</code></th><td>Sort by percent.</td></tr>
<tr><th><codeclass="hilight">sorter: "usLongDate"</code></th><td>Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM).</td></tr>
<tr><th><codeclass="hilight">sorter: "shortDate"</code></th><td>Sort by a shorten date (see <ahref="#dateformat"><codeclass="hilight">"dateFormat"</code></a>).</td></tr>
<tr><th><codeclass="hilight">sorter: "time"</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
<tr><th><codeclass="hilight">sorter: "metadata"</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
Check out the <ahref="#headers"><codeclass="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) <spanclass="tip"><em>New!</em></span>.
<td>jQuery selectors used to find the header cells. You can change this, but the table will still need the required thead and tbody before this plugin will work properly.</td>
<td></td>
</tr>
<trid="sortforce">
<td><ahref="#"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 <codeclass="hilight">sortList</code>.
<divclass="collapsible">
<br>
For example, <codeclass="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 <ahref="#sortappend"><codeclass="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><ahref="#sortforce"><codeclass="hilight">sortForce</code></a> forces the user to have this/these column(s) sorted first (null by default).</li>
<li><ahref="#sortlist"><codeclass="hilight">SortList</code></a> is the initial sort order of the columns.</li>
<li><ahref="#sortappend"><codeclass="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: <codeclass="hilight">[[columnIndex, sortDirection], ... ]</code> where <codeclass="hilight">columnIndex</code> is a zero-based index for your columns left-to-right and <codeclass="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: <codeclass="hilight">[[0,0],[1,0]]</code>.
<preclass="js">$(function(){
$("table").tablesorter({
sortForce : [[0,0]], // Always sort first column first
The value contains an array of instructions for per-column sorting and direction in the format: <codeclass="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: <codeclass="hilight">[[0,0],[1,0]]</code>. Please see <ahref="#sortforce"><codeclass="hilight">sortForce</code></a> for more details on other sort order options.
<td>Use to add an additional forced sort that will be appended to the dynamic selections by the user.
<divclass="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: <codeclass="hilight">[[columnIndex, sortDirection], ... ]</code> where <codeclass="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: <codeclass="hilight">[[0,0],[1,0]]</code>. Please see <ahref="#sortforce"><codeclass="hilight">sortForce</code></a> for more details on other sort order options.
When clicking the header for the first time, the direction it sorts. Valid arguments are <codeclass="hilight">"asc"</code> for Ascending or <codeclass="hilight">"desc"</code> for Descending.<br>
<spanclass="tip"><em>New!</em></span> in v2.0.8: This order can also be set by desired column using the <ahref="#headers"><codeclass="hilight">headers</code></a> option.
Boolean flag indicating whenever to use javascript <codeclass="hilight">String.localeCampare</code> method or not. This is only used when comparing text strings.<br>
In Tablesorter version 2.0.6+, the default sort was replaced with an alpha-numeric sort. To over-ride this behaviour, set this <codeclass="hilight">sortLocaleCompare</code> to <codeclass="hilight">true</code>.
</td>
<td></td>
</tr>
<trid="sortmultisortkey">
<td>sortMultiSortKey</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 <codeclass="hilight">"ctrlKey"</code> or <codeclass="hilight">"altKey"</code>. <br>Reference: <aclass="external"href="http://developer.mozilla.org/en/docs/DOM:event#Properties">http://developer.mozilla.org/en/docs/DOM:event#Properties</a></td>
tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples. Updated to a jQuery example by Rob G (Mottie).<br>
<br>
Now if the text you are finding in the script above is say a number, then just include the <ahref="#headers"><codeclass="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.
Initialize widgets using this option ( e.g. <codeclass="hilight">widgets : ['zebra']</code>, or custom widgets <codeclass="hilight">widgets: ['zebra', 'myCustomWidget'];</code>, see <ahref="example-widgets.html">this demo</a> on how to write your own custom widget ).
When the zebra striping widget is initialized, it automatically applied the default class names of <codeclass="hilight">"even"</code> and <codeclass="hilight">"odd"</code>.
When the column styling widget is initialized, it automatically applied the default class names of <codeclass="hilight">"primary"</code> for the primary sort, <codeclass="hilight">"secondary"</code> for the next sort, <codeclass="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... <spanclass="tip"><em>New!</em></span> in v2.0.17.
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <codeclass="hilight">"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <codeclass="hilight">"ui-icon-arrowthick-1-s"</code> for the descending sort and <codeclass="hilight">"ui-icon-arrowthick-1-n"</code> for the ascending sort. <spanclass="tip"><em>New!</em></span> in v2.0.9.
<divclass="collapsible">
<br>
Use the <ahref="#widgetuitheme"><codeclass="hilight">"widgetUitheme"</code></a> option to change the css class name as follows:
<preclass="js">$(function(){
$("table").tablesorter({
widgets: ["uitheme"], // initialize ui theme styling widget of the table
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 <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all):
<td>Update a table that has had its data dynamically changed; used in conjunction with "update".<br>
<divclass="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.
<preclass="js">// Table data was just dynamically changed (more than one cell)
<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.
<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.
<divclass="collapsible">
<preclass="js">// Update the list of widgets to apply to the table (add or remove)
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 <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all):
<td>This event fires when the pager plugin has completed its render of the table on the currently selected page. <spanclass="tip"><em>New!</em></span> in v2.0.7.
<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>
<li><ahref="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (6,2kb, includes the jQuery UI theme, columns styling widget, filter widget and sticky header widgets. <spanclass="tip"><em>New!</em></span> in v2.0.21.1.)</li>
<li><ahref="example-widget-ui-theme.html">jQuery UI Theme</a> - Apply any jQuery UI theme to the table using the "uitheme" widget code. <spanclass="tip"><em>New!</em></span> in v2.0.9!</li>
<p>Access to the jQuery Mailing List is also available through <aclass="external"href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
<aname="Credits"></a>
<h1>Credits</h1>
<p>
Written by <aclass="external"href="http://lovepeacenukes.com">Christian Bach</a>.
</p>
<p>
Documentation written by <aclass="external"href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
based on <aclass="external"href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>
Missing documentation, alphanumeric sort, numerous widgets and other changes added by <aclass="external"href="https://github.com/Mottie/tablesorter">Mottie</a>.
