表格排序和分頁的實現
sorttable.js 和tablesorter.js外掛的差異
兩了外掛都是用於表格排序，下面，用程式碼的形式進行比較。
一、sorttable.js 實現表格排序；
1.下載sorttable.js外掛。下載網址：http://www.kryogenix.org/code/browser/sorttable/
<table id="table1" class="sortable">.........</table>
只需三步，完美實現表格的排序。
sorttable.js外掛，用於排序功能十分強大，除了不支援分頁，其它只要你想的到都可以幫你實現。如在表的外面寫個a標籤，點選a標籤進行排序，拖拽進行排序，統計列數，新增表格序號的等功能。
二、tablesorter.js 實現表格排序 1.下載外掛，官方地址：jquery.tablesorter.js 2.下載好了，引用兩個外掛。
3.技術實現。
<html>
<script type="text/javascript" src="/js/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortTable").tablesorter();
});
</script>
<form id="form1" runat="server">
<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> 一個簡單的表格排序就已經實現了。 那我們繼續學習如何實現分頁排序功能； 1.繼續引用外掛
2.還有個分頁表格的樣式
3.程式碼實現：<html>
<script type="text/javascript" src="/js/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="/js/jquery.tablesorter.pager.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortTable").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
})
</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>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>[email protected]</td>
<td>28</td>
<td>http://www.zhangsan.com</td>
</tr>
<tr>
<td>耿耿</td>
<td>女</td>
<td>[email protected]</td>
<td>20</td>
<td>http://www.gg.com</td>
</tr>
<tr>
<td>周星星</td>
<td>男</td>
<td>[email protected]</td>
<td>30</td>
<td>http://www.zxx.com</td>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<asp:HyperLink class="first" runat="server">首頁</asp:HyperLink>
<asp:HyperLink class="prev" runat="server">上一頁</asp:HyperLink>
<input type="text" class="pagedisplay"/>
<asp:HyperLink class="next" runat="server">下一頁</asp:HyperLink>
<asp:HyperLink class="last" runat="server">尾頁</asp:HyperLink>
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</form>
</div>
</html>
就這樣，一個表格的分頁排序就完成了。下面我們繼續學習一下其他功能。
（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} } }); 元資料方法：
（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’] });