mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
1148 lines
48 KiB
HTML
1148 lines
48 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.6/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.min.js"></script>
|
|
<script>
|
|
$(function() {
|
|
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]],widgets:['zebra']});
|
|
$("#options").tablesorter({sortList:[[0,0]],headers:{3:{sorter:false},4:{sorter:false}}});
|
|
$("#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> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br>
|
|
<strong>Version:</strong> 2.0.20 (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">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>
|
|
|
|
<p class="tip update">
|
|
<em>Update!</em> New version!, and the tablesorter docs are now available in russian, head over to <a class="external" href="http://tablesorter.ru/docs/">tablesorter.ru</a>
|
|
</p>
|
|
|
|
<p class="tip">
|
|
<em>Helping out!</em> If you like tablesorter and you're feeling generous, take a look at my <a class="external" href="http://www.amazon.com/gp/registry/wishlist/3VAOWCL63NEA6/ref=wl_web/">Amazon Wish List</a> or make a donation.
|
|
</p>
|
|
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
|
<input type="hidden" name="cmd" value="_donations">
|
|
<input type="hidden" name="business" value="christian.bach@polyester.se">
|
|
<input type="hidden" name="lc" value="US">
|
|
<input type="hidden" name="item_name" value="Tablesorter donation">
|
|
<input type="hidden" name="no_note" value="0">
|
|
<input type="hidden" name="currency_code" value="USD">
|
|
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">
|
|
<input type="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!">
|
|
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
|
|
</form>
|
|
|
|
<p>Comments and love letters can be sent to: <span class="email">christian at tablesorter dot com</span>.</p>
|
|
|
|
<p> </p>
|
|
|
|
<!--
|
|
<p class="tip">
|
|
<em>Help!</em> keep tablesorter.com up and running. If you like tablesorter, have a couple of bucks over or just feel like it. Please donate.</p>
|
|
</p>
|
|
|
|
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
|
<input type="hidden" name="cmd" value="_xclick">
|
|
<input type="hidden" name="business" value="christian.bach@polyester.se">
|
|
<input type="hidden" name="item_name" value="Tablesorter donation">
|
|
<input type="hidden" name="currency_code" value="USD">
|
|
<input type="hidden" name="amount" value="10.00">
|
|
<input type="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!">
|
|
</form>
|
|
-->
|
|
|
|
<a name="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="#Methods">Methods</a> <span class="tip"><em>New!</em></span></li>
|
|
<li><a href="#Events">Events</a> <span class="tip"><em>New!</em></span></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 name="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>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 for ROWSPAN and COLSPAN on TH elements</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 name="Demo"></a>
|
|
<h1>Demo</h1>
|
|
|
|
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0">
|
|
<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 name="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 name="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>
|
|
|
|
<strong>Basic</strong>
|
|
<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-child-rows.html">How to add rows that sort with their parent row</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-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> <span class="tip"><em>New! v2.0.10</em></span></li>
|
|
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
|
|
<li><a href="example-apply-widget.html">Applying widgets</a></li>
|
|
<li><a href="example-widget-zebra.html">Applying the zebra stripe widget</a></li>
|
|
<li><a href="example-widget-columns.html">Applying the columns widget</a> <span class="tip"><em>New! v2.0.17</em></span></li>
|
|
<li><a href="example-widget-filter.html">Applying the filter widget</a> <span class="tip"><em>New! v2.0.18</em></span></li>
|
|
<li><a href="example-widget-ui-theme.html">Applying the jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
|
|
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> <span class="tip"><em>New! v2.0.11</em></span></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-sort-key.html">Change the default multi-sorting key</a></li>
|
|
</ul>
|
|
<strong>Metadata - setting inline options</strong>
|
|
<ul>
|
|
<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>
|
|
<strong>Advanced</strong>
|
|
<ul>
|
|
<li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li>
|
|
<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> <span class="tip"><em>New! v2.0.16</em></span></li>
|
|
<li><a href="example-update-cell.html">Update the table after cell content has changed</a></li>
|
|
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
|
|
<li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</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>
|
|
<li><a href="example-parsers.html">Parser, writing your own</a></li>
|
|
<li><a href="example-widgets.html">Widgets, writing your own</a></li>
|
|
</ul>
|
|
|
|
<strong>Companion plugins</strong>
|
|
<ul>
|
|
<li><a href="example-pager.html">Pager plugin</a></li>
|
|
</ul>
|
|
|
|
<a name="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)
|
|
</p>
|
|
|
|
<table id="options" class="tablesorter" border="0" cellpadding="0">
|
|
<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>
|
|
<tbody>
|
|
|
|
<tr id="cancelselection">
|
|
<td>cancelSelection</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>"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.headerSortUp {
|
|
background-image: url(../img/small_asc.gif);
|
|
background-color: #3399FF;
|
|
}</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><a href="example-child-rows.html">Example</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>"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.headerSortDown {
|
|
background-image: url(../img/small_desc.gif);
|
|
background-color: #3399FF;
|
|
}</pre></div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="cssheader">
|
|
<td><a href="#" 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:
|
|
<div class="collapsible">
|
|
<pre class="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>
|
|
|
|
<tr id="dateformat">
|
|
<td><a href="#" class="toggle2">dateFormat</a></td>
|
|
<td>String</td>
|
|
<td>"us"</td>
|
|
<td>Set the date format. Here are the available options:
|
|
<div class="collapsible">
|
|
<ul>
|
|
<li><code class="hilight">"us"</code> (default) - "mm-dd-yyyy" or "mm/dd/yyyy"</li>
|
|
<li><code class="hilight">"uk"</code> - "dd-mm-yyyy" or "dd/mm/yyyy"</li>
|
|
<li><code class="hilight">"dd/mm/yy"</code> or <code class="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>
|
|
|
|
<tr id="debug">
|
|
<td>debug</td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Boolean flag indicating if tablesorter should display debuging information usefull for development.
|
|
</td>
|
|
<td><a href="example-option-debug.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="headerlist">
|
|
<td>headerList</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" }, // zero
|
|
2: { sorter: "digit", string: "max+" }, // maximum positive value
|
|
3: { sorter: "digit", string: "max-" }, // maximum negative value
|
|
|
|
// Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
|
|
4: { sorter: "shortDate" },
|
|
|
|
// 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="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) <span class="tip"><em>New!</em></span>.
|
|
</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>selectorHeaders</td>
|
|
<td>String</td>
|
|
<td>"thead th"</td>
|
|
<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>
|
|
|
|
<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 <code class="hilight">sortList</code>.
|
|
<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></td>
|
|
</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.
|
|
</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>sortInitialOrder</td>
|
|
<td>String</td>
|
|
<td>"asc"</td>
|
|
<td>
|
|
When clicking the header for the first time, the direction it sorts. Valid arguments are <code class="hilight">"asc"</code> for Ascending or <code class="hilight">"desc"</code> for Descending.<br>
|
|
<span class="tip"><em>New!</em></span> in v2.0.8: This order can also be set by desired column using the <a href="#headers"><code class="hilight">headers</code></a> option.
|
|
</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>sortLocaleCompare</td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>
|
|
Boolean flag indicating whenever to use javascript <code class="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 <code class="hilight">sortLocaleCompare</code> to <code class="hilight">true</code>.
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr id="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 <code class="hilight">"ctrlKey"</code> or <code class="hilight">"altKey"</code>. <br>Reference: <a class="external" href="http://developer.mozilla.org/en/docs/DOM:event#Properties">http://developer.mozilla.org/en/docs/DOM:event#Properties</a></td>
|
|
<td><a href="example-option-sort-key.html">Example</a></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.
|
|
Built-in options include <code class="hilight">"simple"</code> and <code class="hilight">"complex"</code>. Use complex if you have data marked up
|
|
inside of a table cell like: <code class="hilight"><td><strong><em>123 Main Street</em></strong></td></code>.
|
|
<div class="collapsible">
|
|
<br>
|
|
Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:
|
|
<pre class="js">var myTextExtraction = function(node){
|
|
// extract data from markup and return it
|
|
// originally: return node.childNodes[0].childNodes[0].innerHTML;
|
|
return $(node).text();
|
|
}
|
|
$(function(){
|
|
$("#myTable").tableSorter( { textExtraction: myTextExtraction } );
|
|
});</pre>
|
|
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 <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.
|
|
<pre class="js">$(function(){
|
|
$("table").tablesorter({
|
|
textExtraction: {
|
|
1: function(node) {
|
|
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="widgets">
|
|
<td>widgets</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="widgetzebra">
|
|
<td><a href="#" class="toggle2">widgetZebra</a></td>
|
|
<td>Object with Array</td>
|
|
<td>{ css: [ "even", "odd" ] }</td>
|
|
<td>
|
|
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>.
|
|
<div class="collapsible">
|
|
<br>
|
|
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><a href="example-widget-zebra.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widgetcolumns">
|
|
<td><a href="#" class="toggle2">widgetColumns</a></td>
|
|
<td>Object with Array</td>
|
|
<td>{ css:[ "primary", "secondary", "tertiary" ] }</td>
|
|
<td>
|
|
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)... <span class="tip"><em>New!</em></span> in v2.0.17.
|
|
<div class="collapsible">
|
|
<br>
|
|
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><a href="example-widget-columns.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widgetuitheme">
|
|
<td><a href="#" class="toggle2">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>
|
|
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. <span class="tip"><em>New!</em></span> in v2.0.9.
|
|
<div class="collapsible">
|
|
<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", "ui-icon-carat-1-s", "ui-icon-carat-1-n"] }
|
|
});
|
|
});</pre></div>
|
|
</td>
|
|
<td><a href="example-widget-columns.html">Example</a></td>
|
|
</tr>
|
|
|
|
<tr id="widthfixed">
|
|
<td>widthFixed</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.</a></td>
|
|
<td><a href="example-pager.html">Example</a></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="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):
|
|
</p>
|
|
|
|
<table id="methods" class="tablesorter" border="0" cellpadding="0">
|
|
<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. <span class="tip"><em>New!</em> in v2.0.16</span>
|
|
<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>');
|
|
$('table')
|
|
.find('tbody').append($row)
|
|
.trigger('addRows', [$row]);</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
|
|
$("table").trigger("update");
|
|
|
|
// 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 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
|
|
$("table").trigger("updateCell",[this]);
|
|
|
|
// 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>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="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):
|
|
</p>
|
|
|
|
<table id="events" class="tablesorter" border="0" cellpadding="0">
|
|
<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. <span class="tip"><em>New!</em></span> in 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. <span class="tip"><em>New!</em></span> in 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 name="Download"></a>
|
|
<h1>Download</h1>
|
|
|
|
<p><strong>Full release</strong> - Plugin, Documentation, Add-ons, Themes <a href="http://github.com/Mottie/tablesorter/downloads">jquery.tablesorter.zip</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.1 or higher)</li>
|
|
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (17kb, 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> (3,7kb <strong>Required for setting <a href="#Examples">inline options</a></strong>)</li>
|
|
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
|
|
<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (5,6kb, <a href="example-pager.html">tablesorter pagination plugin</a>)</li>
|
|
<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (4,1kb, includes the jQuery UI theme 'uitheme', columns styling 'columns' widget and row 'filter' widgets. <span class="tip"><em>New!</em></span> in v2.0.17.)</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. <span class="tip"><em>New!</em></span> in v2.0.9!</li>
|
|
</ul>
|
|
|
|
<a name="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 name="Support"></a>
|
|
<h1>Support</h1>
|
|
<p>
|
|
Support is available through the
|
|
<a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</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 name="Credits"></a>
|
|
<h1>Credits</h1>
|
|
<p>
|
|
Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.
|
|
</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 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>
|
|
|