一、简介:
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>jsmith@gmail.com</td> 25 <td>28</td> 26 <td>http://www.zhangsan.com</td> 27 </tr> 28 <tr> 29 <td>耿耿</td> 30 <td>女</td> 31 <td>fbach@yahoo.com</td> 32 <td>20</td> 33 <td>http://www.gg.com</td> 34 </tr> 35 <tr> 36 <td>周星星</td> 37 <td>男</td> 38 <td>jdoe@hotmail.com</td> 39 <td>30</td> 40 <td>http://www.zxx.com</td> 41 </tr> 42 </tbody> 43 </table>
其他实例:
(1)设置默认执行列
eg:按照第一列和第二列升序
1
|
$("#sortTable").tablesorter( {sortList: [[0,0], [1,0]]} );
|
元数据方法:
1
|
<
table
id="sortTable" class="tablesorter {sortlist: [[0,0],[1,0]]}">
|
(2)禁用排序:某些列不支持排序,第一列下标为0
1
2
3
4
5
6
|
$("#sortTable").tablesorter({
headers: {
1: {sorter: false},
2: {sorter: false}
}
});
|
元数据方法:
1
|
<
th
class="{sorter:false}"></
th
>
|
(3)表格之外的链接排序
1
2
3
4
5
6
7
8
|
$("#sortTable").tablesorter();
$("#trigger-link").click(function() {
var sorting = [[0,0],[2,0]];
$("table").trigger("sorton",[sorting]);
return false;
});
<
a
href="javascript:void(0);" id="trigger-link">trigger-link</
a
>
|
(4)改变多列排序的key,默认是shift
1
2
3
|
$("#sortTable").tablesorter({
sortMultiSortKey: 'altKey'
});
|
(5)增加记录或动态加载记录
1
2
3
4
|
$("table tbody").append(html);
$("#sortTable").trigger("update");
var sorting = [[2,1],[0,0]];
$("#sortTable").trigger("sorton",[sorting]);
|
(6)自定义解析器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$("#sortTable").tablesorter({
headers: {
6: {sorter:'grades' }
}
});
$.tablesorter.addParser({
id: 'grades',
is: function(s) {
return false;
},
format: function(s) {
// 格式化数据,按照bad,medium,good升序
return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
},
// set type, either numeric or text
type: 'numeric' //数字排序
});
|
(7)自定义控件
1
2
3
4
5
6
7
8
9
10
|
$.tablesorter.addWidget({
id: "repeatHeaders",
format: function(table) {
//…...
}
});
$("#sortTable").tablesorter({
//zebra是默认的,repeatHeaders是自定义的;
widgets: ['zebra','repeatHeaders']
});
|
(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
|
<
link
rel="stylesheet" href="jquery.tablesorter.pager.css" type="text/css" />
<
script
type="text/javascript" src="jquery.tablesorter.pager.js"></
script
>
<
script
type="text/javascript">
$(document).ready(function() {
$("sortTable").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
})
</
script
>
<
div
id="pager" class="pager">
<
form
>
<
img
src="../addons/pager/icons/first.png" class="first"/>
<
img
src="../addons/pager/icons/prev.png" class="prev"/>
<
input
type="text" class="pagedisplay"/>
<
img
src="../addons/pager/icons/next.png" class="next"/>
<
img
src="../addons/pager/icons/last.png" class="last"/>
<
select
class="pagesize">
<
option
selected="selected" value="10">10</
option
>
<
option
value="20">20</
option
>
<
option
value="30">30</
option
>
<
option
value="40">40</
option
>
</
select
>
</
form
>
</
div
>
|
三、属性
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: |
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
|
if (type == 'text' && direction == 'asc') {
if(table.config.sortLocaleCompare){
return a+".localeCompare("+ b + ");";
}else{
return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + a + " < " + b + ") ? -1 : 1 )));";
}
} else if (type == 'text' && direction == 'desc') {
if(table.config.sortLocaleCompare){
return b+".localeCompare("+ a + ");";
}else{
return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + b + " < " + a + ") ? -1 : 1 )));";
}
}
|
(2)过滤某些行不参与排序
修改buildCache(table)方法,编辑代码段:(实例为class为children的不参与排序)
1
2
3
4
5
|
if (c.hasClass(table.config.cssChildRow)||c.hasClass('children')) {
cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c);
// go to the next for loop
continue;
}
|
转自:http://www.cnblogs.com/BlackElf/p/5634974.html