一、简介：
Tablesorter?作用于一个标准的HTML表格（有THEAD，TBODY），实现静态排序；主要特点包括：
（1） 多列排序；
（2） 支持文本、URI地址、数值、货币、浮点数、IP地址、日期、时间以及自定义类型排序；
（3） 支持第二个隐藏域排序，例如保持按字母排序时的排序对其他标准（支持两个）；
（4） 可扩展外观；
（5） 程序简小；
（6） 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性；
（7） 浏览器支持：IE6+，FF2+，Safari2.0+，Opera9.0+；
必需：jquery.js、jquery.tablesorter.js
可选：jquery.metadata.js 元数据；jquery.tablesorter.pager.js 分页；
主题：Green Skin、Blue Skin
二、实例
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="jquery.tablesorter.js"></script>
3
4 <script type="text/javascript">
5 $(document).ready(function() {
6 $("#sortTable").tablesorter();
7 });
8 </script>
9
10 <table id="sortTable" class="tablesorter">
11 <thead>
12 <tr>
13 <th>name</th>
14 <th>sex</th>
15 <th>Email</th>
16 <th>age</th>
17 <th>Web Site</th>
18 </tr>
19 </thead>
20 <tbody>
21 <tr>
22 <td>张三</td>
23 <td>男</td>
24 <td>[email protected]</td>
25 <td>28</td>
26 <td>http://www.zhangsan.com</td>
27 </tr>
28 <tr>
29 <td>耿耿</td>
30 <td>女</td>
31 <td>[email protected]</td>
32 <td>20</td>
33 <td>http://www.gg.com</td>
34 </tr>
35 <tr>
36 <td>周星星</td>
37 <td>男</td>
38 <td>[email protected]</td>
39 <td>30</td>
40 <td>http://www.zxx.com</td>
41 </tr>
42 </tbody>
43 </table>
其他实例：
（1）设置默认执行列
eg：按照第一列和第二列升序
|
1 |
|
元数据方法：
|
1 |
|
（2）禁用排序：某些列不支持排序，第一列下标为0
|
1 2 3 4 5 6 |
|
元数据方法：
|
1 |
|
（3）表格之外的链接排序
|
1 2 3 4 5 6 7 8 |
|
（4）改变多列排序的key，默认是shift
|
1 2 3 |
|
（5）增加记录或动态加载记录
|
1 2 3 4 |
|
（6）自定义解析器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
（7）自定义控件
|
1 2 3 4 5 6 7 8 9 10 |
|
（8）分页插件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
三、属性
|
Property |
Type |
Default |
Description |
|
sortList |
Array |
null |
列的排序和方向数组：[[columnIndex, sortDirection], ... ]； columnIndex从0开始，从左到右依次增加； sortDirection为0表示升序，为1表示降序； |
|
sortMultiSortKey |
String |
shiftKey |
用于多列排序，按住shiftkey键可以再之前基础上在排序，默认shiftkey，可以修改为其他键； |
|
textExtraction |
String Or Function |
simple |
限定使用哪一种方法用于提取表格单元格数据进行排序；内置选项有simple和complex， 例如<td><strong><em>123 Main Street</em></strong></td>需要使用complex； 但complex在数据很多时会比较慢，因此可以自定义方法，例如myTextExtraction： 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}); });
|
|
headers |
Object |
null |
控制每列的格式，headers: { 0: { option: setting }, ... } |
|
sortForce |
Array |
null |
为用户的动态选择附加一个强制排序，例如: sortForce: [[0,0]]表示第一列强制排序，选择另一列排序时， 是在第一列的升序基础上排序的； |
|
widthFixed |
Boolean |
false |
标识固定宽度列 |
|
cancelSelection |
Boolean |
true |
标识需要禁用的所选择的表头文本 |
|
cssHeader |
String |
"header" |
th.header {} 表头样式 |
|
cssAsc |
String |
"headerSortUp" |
th.headerSortUp {} 升序 |
|
cssDesc |
String |
"headerSortDown" |
th.headerSortDown {} 降序 |
四、其他（修改tablesorter.js文件）
（1）中文排序未按照首字母排序
修改makeSortFunction(type, direction, index)方法，首先增加参数table，用来读取“table”对象config属性的sortLocaleCompare值，如果此值被赋值为“true”则使用汉语排序规则，如果被赋值为“false”则使用英文排序规则。 编辑makeSortFunction方法中如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
（2）过滤某些行不参与排序
修改buildCache(table)方法，编辑代码段：（实例为class为children的不参与排序）
|
1 2 3 4 5 |
|
转自：http://www.cnblogs.com/BlackElf/p/5634974.html