jQuery: The Write Less, Do More JavaScript Library

Plugins/Tablesorter/tablesorter

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Plugins/Tablesorter

[edit]

tablesorter( options )

Create a sortable table with multi-column sorting capabilities.
Arguments:
optionsOptions
A set of key/value pairs that configure tablesorter. All options are optional.

Options:



NameType
cssHeaderString
A string of the class name to be appended to sortable tr elements in the thead of the table.
Sets cssHeader to className "sort-header".

$(".selector").tablesorter({ cssHeader: "sort-header" })

cssAscString
A string of the class name to be appended to sortable tr elements in the thead on a ascending sort.
Sets cssAsc to className "sort-header-asc".

$(".selector").tablesorter({ cssAsc: "sort-header-asc" })

cssDescString
A string of the class name to be appended to sortable tr elements in the thead on a descending sort.
Sets cssDesc to className "sort-header-desc".

$(".selector").tablesorter({ cssDesc: "sort-header-desc" })

sortMultisortKeyString
A string of the multi-column sort key.
Sets sortMultisortKey to key event control.

$(".selector").tablesorter({ sortMultisortKey: "ctrlKey" })

textExtractionString
A string of the text-extraction method to use. For complex HTML structures inside td cell set this option to "complex", on large tables the complex option can be slow.
Sets textExtraction to key "complex".

$(".selector").tablesorter({ textExtraction: "complex" })

headersObject
An object of instructions for per-column controls.
Disable sorting on the first two columns of a table:.

$(".selector").tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} })

sortListArray
An array of instructions for per-column sorting and direction in the format: [columnIndex, sortDirection] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending.
Sorting the table by column 1 and column 2 in ascending order.

$(".selector").tablesorter({ sortList: [[0,0],[1,0]] })

sortForceArray
Use to add an additional forced sort that will be appended to the dynamic selections by the user. 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.
Force sorting by column 1 and column 2 in ascending order.

$(".selector").tablesorter({ sortForce: [[0,0],[1,0]] })

widgetsArray
Adds dynamically an even/odd class to each row newly sorted .
Sets widgets to zebra (even rows have the class "even", odd rows have the class "odd").

$(".selector").tablesorter({ widgets: ['zebra'] })

widthFixedBoolean
Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work.
Sets widthFixed to true.

$(".selector").tablesorter({ widthFixed: true })

cancelSelectionBoolean
Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
Sets cancelSelection to false.

$(".selector").tablesorter({ cancelSelection: false })

debugBoolean
Enables debugging mode, useful for development.
Enable debugging mode.

$(".selector").tablesorter({ debug: true })

Examples:
A simple Table Sorter.

$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
  });
  </script>
  
</head>
<body>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="http://dev.jquery.com/view/trunk/plugins/tablesorter/2.0/jquery.tablesorter.js"></script>

	<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
		<thead>
			<tr>
				<th>First Name</th>
				<th>Last Name</th>

				<th>Age</th>
				<th>Total</th>
				<th>Discount</th>
				<th>Date</th>
			</tr>
		</thead>
		<tbody>

			<tr>
				<td>Peter</td>
				<td>Parker</td>
				<td>28</td>
				<td>$9.99</td>
				<td>20%</td>

				<td>Jul 6, 2006 8:14 AM</td>
			</tr>
			<tr>
				<td>John</td>
				<td>Hood</td>
				<td>33</td>
				<td>$19.99</td>

				<td>25%</td>
				<td>Dec 10, 2002 5:14 AM</td>
			</tr>
			<tr>
				<td>Clark</td>
				<td>Kent</td>
				<td>18</td>

				<td>$15.89</td>
				<td>44%</td>
				<td>Jan 12, 2003 11:14 AM</td>
			</tr>
			<tr>
				<td>Bruce</td>
				<td>Almighty</td>

				<td>45</td>
				<td>$153.19</td>
				<td>44%</td>
				
				<td>Jan 18, 2001 9:12 AM</td>
			</tr>
			<tr>
				<td>Bruce</td>

				<td>Evans</td>
				<td>22</td>
				<td>$13.19</td>
				<td>11%</td>
				<td>Jan 18, 2007 9:12 AM</td>
			</tr>

		</tbody>
	</table>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Plugins/Tablesorter/tablesorter"