tablesorter周边文档

一、简介:

Tablesorter​作用于一个标准的HTML表格(有THEAD,TBODY),实现静态排序;主要特点包括:

(1) 多列排序;

(2) 支持文本、URI地址、数值、货币、浮点数、IP地址、日期、时间以及自定义类型排序;

(3) 支持第二个隐藏域排序,例如保持按字母排序时的排序对其他标准(支持两个);

(4) 可扩展外观;

(5) 程序简小;

(6) 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性;

(7) 浏览器支持:IE6+,FF2+,Safari2.0+,Opera9.0+;

​下载:jquery.tablesorter.zip

必需: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:

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
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

转载于:https://www.cnblogs.com/axu92312/p/6097405.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值