首页 > 建站教程 > JS、jQ、TS >  jQuery tablesorter排序分页插件正文

jQuery 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

二、实例 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#sortTable").tablesorter();
});
</script>
<table id="sortTable" class="tablesorter">
   <thead>
      <tr>
         <th>name</th>
         <th>sex</th>
         <th>Email</th>
         <th>age</th>
         <th>Web Site</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>张三</td>
         <td>男</td>
         <td>jsmith@gmail.com</td>
         <td>28</td>
         <td>http://www.zhangsan.com</td>
      </tr>
      <tr>
         <td>耿耿</td>
         <td>女</td>
         <td>fbach@yahoo.com</td>
         <td>20</td>
         <td>http://www.gg.com</td>
      </tr>
      <tr>
         <td>周星星</td>
         <td>男</td>
         <td>jdoe@hotmail.com</td>
         <td>30</td>
         <td>http://www.zxx.com</td>
      </tr>
   </tbody>
</table>
其他实例：

（1）设置默认执行列
    eg：按照第一列和第二列升序 
$("#sortTable").tablesorter( {sortList: [[0,0], [1,0]]} );
    元数据方法： 
<table id="sortTable" class="tablesorter {sortlist: [[0,0],[1,0]]}">
（2）禁用排序：某些列不支持排序，第一列下标为0 
$("#sortTable").tablesorter({
    headers: {
       1: {sorter: false},
       2: {sorter: false}
     }
});
    元数据方法： 
<th class="{sorter:false}"></th>
（3）表格之外的链接排序 
$("#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 
$("#sortTable").tablesorter({
   sortMultiSortKey: 'altKey'
});
（5）增加记录或动态加载记录 
$("table tbody").append(html);
$("#sortTable").trigger("update");
var sorting = [[2,1],[0,0]];
$("#sortTable").trigger("sorton",[sorting]);
（6）自定义解析器 
$("#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）自定义控件 
$.tablesorter.addWidget({
    id: "repeatHeaders",
    format: function(table) {
        //…...
    }
});
$("#sortTable").tablesorter({
    //zebra是默认的，repeatHeaders是自定义的；
    widgets: ['zebra','repeatHeaders']
});
（8）分页插件 
<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方法中如下代码： 
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的不参与排序） 
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://tablesorter.com/docs/
TAGS: tablesorter