jQuery tablesorter 插件使用

Property	Type	Default	Description	Link
cancelSelection	Boolean	true	Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssAsc	String	"headerSortUp"	The CSS style used to style the header when sorting ascending. Example from the blue skin: [css] view plaincopy th.headerSortUp { <br> <span class="attrib">background-image</span>: <span class="value">url</span>(../img/small_asc.gif); <br> <span class="attrib">background-color</span>: <span class="color">#3399FF</span>; <br>} <br>
cssDesc	String	"headerSortDown"	The CSS style used to style the header when sorting descending. Example from the blue skin: [css] view plaincopy th.headerSortDown { <br> <span class="attrib">background-image</span>: <span class="value">url</span>(../img/small_desc.gif); <br> <span class="attrib">background-color</span>: <span class="color">#3399FF</span>; <br>} <br>
cssHeader	String	"header"	The CSS style used to style the header in its unsorted state. Example from the blue skin: [css] view plaincopy th.header { <br> <span class="attrib">background-image</span>: <span class="value">url</span>(../img/<span class="value">small</span>.gif); <br> <span class="attrib">cursor</span>: <span class="value">pointer</span>; <br> <span class="attrib">font-weight</span>: <span class="value">bold</span>; <br> <span class="attrib">background-repeat</span>: <span class="value">no-repeat</span>; <br> <span class="attrib">background-position</span>: <span class="value">center</span> <span class="value">left</span>; <br> <span class="attrib">padding-left</span>: <span class="number">20px</span>; <br> <span class="attrib">border-right</span>: <span class="number">1px</span> <span class="value">solid</span> <span class="color">#dad9c7</span>; <br> <span class="attrib">margin-left</span>: -<span class="number">1px</span>; <br>} <br>
debug	Boolean	false	Boolean flag indicating if tablesorter should display debuging information usefull for development.	Example
headers	Object	null	An object of instructions for per-column controls in the format: headers: { 0: { option: setting }, ... } For example, to disable sorting on the first two columns of a table: headers: { 0: { sorter: false}, 1: {sorter: false} }	Example
sortForce	Array	null	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.	Example
sortList	Array	null	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. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]	Example
sortMultiSortKey	String	shiftKey	The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey. Reference: http://developer.mozilla.org/en/docs/DOM:event#Properties	Example
textExtraction	String Or Function	simple	Defines which method is used to extract data from a table cell for sorting. Built-in options include "simple" and "complex". Use complex if you have data marked up inside of a table cell like: <td><strong><em>123 Main Street</em></strong></td> . Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like: [javascript] view plaincopy <span class="keywords">var</span> myTextExtraction = <span class="keywords">function</span>(node) <br>{ <br> <span class="com">// extract data from markup and return it </span> <br> <span class="keywords">return</span> node.childNodes[<span class="numbers">0</span>].childNodes[<span class="numbers">0</span>].innerHTML; <br>} <br>$(<span class="global">document</span>).ready(<span class="keywords">function</span>() <br> { <br> $(<span class="string">"#myTable"</span>).tableSorter( {textExtraction: myTextExtraction} ); <br> } <br>); <br> 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.	Example
widthFixed	Boolean	false	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.	Example

--------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="tablesort.css" type="text/css"/>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.tablesorter.pager.js"></script>
</HEAD>

<BODY>
<table id="myTable" border="1">
<thead>
<tr class="th1">
<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>
</BODY>
</HTML>

----------------------------------------------------------------------------------------------------------------

table{
border:0px solid #EEE;
cellspacing:1px;
}
th{
background-image:url(bg.gif);
background-color: #88FFFF;
}
th.headerSortUp {
background-image: url(asc.gif);
background-color: #3399FF;
}
th.headerSortDown{
background-image: url(desc.gif);
background-color: #3399FF;
}
th.header {
background-image:url(bg.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center right;
padding-left:20px;
border-right:0px solid #dad9c7;
margin-left: -1px;
}
td{
width:150px;
}

----------------------------------------------------------------------------------------------------------------

/**
Start by telling tablesorter to sort your table when the document is loaded:
*/
$(document).ready(function(){
$("#myTable").tablesorter();
});
/**
排序列表 [0,0][1,0] 按第一列,第二列进行升序排序 [列索引,排序方向] 0 asc 1 desc
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.
*/
$(document).ready(function(){
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});
/**
排序选项设置
*/
$(document).ready(function(){
$("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']});
});
/*
var myTextExtraction = function(node){
// extract data from markup and return it
return node.childNodes[0].childNodes[0].innerHTML;
}
$(document).ready(function(){
$("#myTable").tableSorter({textExtraction: myTextExtraction});
});
*/

/**
禁止第二列.每三列进行排序
**/
$(document).ready(function(){
$("myTable").tablesorter({
// pass the headers argument and assing a object
headers: {
// assign the secound column (we start counting zero)
1: {
// disable it by setting the property sorter to false
sorter: false},
// assign the third column (we start counting zero)
2: {
// disable it by setting the property sorter to false
sorter: false}
}
});
});

/**
使用TH更像一个按钮
$(document).ready(function(){
$("#myTable").tableSorter(
{cancelSelection:true}
);
});
*/

/**
强制某列排序后不能动,其它列根据该列进行排序
Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
*/
$(document).ready(function(){
// call the tablesorter plugin/
$("myTable").tablesorter({
// set forced sort on the fourth column and i decending order.
sortForce: [[0,0]]}
);
});

/**
按键的更换
*/
$(document).ready(function(){
// call the tablesorter plugin
$("table").tablesorter({
// change the multi sort key from the default shift to alt button
sortMultiSortKey: 'altKey'
});
});

/**
$(document).ready(function(){
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html",function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
});
return false;
});
});
**/

$(document).ready(function(){
$("myTable").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});