Tablesorter 是一個用來直接在瀏覽器上對錶格數據進行排序的jQuery插件,無需再次刷新頁面,支持多種單元格數據類型,例如數值、字符串、日期和自定義排序。javascript
所用文件下載:
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert 文檔css
html以下:html
<table class="table table-striped table-bordered table-hover tablesorter" id="tbList">
注:爲table添加id和class,class必有tablesorter,id無關緊要.java
css: (詳見文章末尾詳細代碼)
定義表格樣式:表頭、升序、降序等樣式。jquery
點擊表頭時,便可對其相應的列進行排序;
js代碼以下:git
<script type="text/javascript"> $("#tbList").tablesorter(); //無id時,能夠用 $(".tablesorter").tablesorter(); </script>
效果如圖:github
對於如圖所示的序號、年齡、進度等各種數字類型的數據,排序功能毫無差錯。
可是,對於如圖所示的課程數、時長、分數等數據後帶有漢字的數據,排序沒什麼效果,例以下圖:
降序: bootstrap
升序:瀏覽器
對於這種狀況,能夠作以下處理:
js代碼url
//自定義排序 $.tablesorter.addParser({ id: "num", //指定一個惟一的ID is: function(s){ return false; }, format: function(s){ return s.substring(0,s.length-2);//去除後面的漢字 }, type: "numeric" //按數值排序 }); $("#tbList").tablesorter({headers:{5:{sorter:"num"},6:{sorter:"num"},7:{sorter:"num"}}}); //表格第6、7、八列
如上圖所示,顯然要按時間長短來排序,這種數據,比較麻煩。
對於這種狀況,能夠作以下處理:
js代碼
$.tablesorter.addParser({ id: "num", //指定一個惟一的ID is: function(s){ return false; }, format: function(s){ //對 xx時xx分xx秒 數據的處理 var hourNum= parseInt(s.substring(0,2));//xx時 var minuteNum= parseInt(s.substring(4,6));//xx分 var secondsNum= parseInt(s.substring(7,9));//xx秒 //將時間換算爲秒 var seconds=hourNum*3600+minuteNum*60+secondsNum; return seconds; }, type: "numeric" //按數值排序 }); $(".tablesorter").tablesorter({headers:{6:{sorter:"num"}}});//表格第七列
排序效果如圖:
降序
升序
更多處理狀況,參見http://www.cnblogs.com/dwnblo...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tablesorter</title> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/tablesorterStyle.css"> </head> <body> <table class="table table-striped table-bordered table-hover tablesorter" id="tbList"> <thead> <tr > <th width="8%"class="header">序號</th> <th width="15%"class="header">用戶名</th> <th width="11%"class="header">姓名</th> <th width="11%"class="header">性別</th> <th width="11%"class="header">年齡</th> <th width="11%"class="header">課程數</th> <th width="11%"class="header">時長</th> <th width="11%"class="header">分數</th> <th width="11%"class="header">進度</th> </tr> </thead> <tbody id="tbody-member-course-summary"> <tr> <td>1</td> <td>111test1</td> <td>華東區</td> <td>女</td> <td>23</td> <td>20 門</td> <td>32 分</td> <!--<td>05小時32分47秒</td>--> <td>86 分</td> <td>79%</td> </tr> <tr> <td>2</td> <td>二</td> <td>李二梅</td> <td>男</td> <td>24</td> <td>4 門</td> <td>102 分</td> <!--<td>03小時02分00秒</td>--> <td>68 分</td> <td>91%</td> </tr> <tr> <td>3</td> <td>zhaoliu</td> <td>趙六</td> <td>男</td> <td>30</td> <td>18 門</td> <td>57 分</td> <!--<td>10小時57分00秒</td>--> <td>84 分</td> <td>37%</td> </tr> <tr> <td>4</td> <td>iii</td> <td>aiaia</td> <td>男</td> <td>20</td> <td>14 門</td> <td>92 分</td> <!--<td>00小時34分00秒</td>--> <td>79 分</td> <td>9%</td> </tr> </tbody> <tfoot id="tfoot-member-course-summary"> <tr> <td>合計:</td> <td> -- 人</td> <td> </td> <td> </td> <td> </td> <td> -- 門</td> <td> -- </td> <td> -- </td> <td> -- %</td> </tr> </tfoot> </table> <script type="text/javascript" src='js/jquery-2.0.2.min.js'></script> <script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.min.js'></script> <!-- <script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.js'></script>--> <script type="text/javascript" src='js/mytablesorter.js'> </script> </body> </html>
table.tablesorter{ font-family: arial; font-size: 8pt; width: 100%; text-align: left; } /*表頭的樣式*/ thead{ background:#ccc; color:#ff0000; } .header{ background-image: url('../plugin/tablesorter/themes/blue/bg.gif'); background-repeat: no-repeat; background-position: center right; cursor: pointer; } /*降序時樣式*/ th.headerSortDown{ color:#00ff00; background-color: #aaa; background-image: url('../plugin/tablesorter/themes/blue/desc.gif'); background-repeat: no-repeat; background-position: center right; cursor: pointer; } /*升序時樣式*/ th.headerSortUp{ color:#0000ff; background-color: #aaa; background-image: url('../plugin/tablesorter/themes/blue/asc.gif'); background-repeat: no-repeat; background-position: center right; cursor: pointer; }
// $("#tbList").tablesorter(); //自定義排序 $.tablesorter.addParser({ id: "num", //指定一個惟一的ID is: function(s){ return false; }, format: function(s){ return s.substring(0,s.length-2); }, type: "numeric" //按數值排序 }); $("#tbList").tablesorter({headers:{6:{sorter:"num"},7:{sorter:"num"},8:{sorter:"num"}}}); // //自定義排序 // $.tablesorter.addParser({ // id: "num", //指定一個惟一的ID // is: function(s){ // return false; // }, // format: function(s){ // //對xx時xx分xx秒 數據的處理 // var hourNum= parseInt(s.substring(0,2));//xx時 // var minuteNum= parseInt(s.substring(4,6));//xx分 // var secondsNum= parseInt(s.substring(7,9));//xx秒 // //將時間換算爲秒 // var seconds=hourNum*3600+minuteNum*60+secondsNum; // return seconds; // }, // type: "numeric" //按數值排序 // }); // $("#tbList").tablesorter({headers:{6:{sorter:"num"}}}); //表格第七列