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>[e-mail]</td> 
    <td>28</td> 
    <td>http://www.zhangsan.com</td> 
</tr> 
<tr> 
    <td>耿耿</td> 
    <td>女</td> 
    <td>[e-mail]</td> 
    <td>20</td> 
    <td>http://www.gg.com</td> 
</tr> 
<tr> 
    <td>周星星</td> 
    <td>男</td> 
    <td>[e-mail]</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/