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