溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是詳解JQuery插件tablesorter如何實現表格排序，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
簡介
Tablesorter 是一個用來直接在瀏覽器上對表格數據進行排序的jQuery插件，無需再次刷新頁面，支持多種單元格數據類型，例如數值、字符串、日期和自定義排序。
使用說明
引入jquery.tablesorter
所用文件下載：
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert官網
http://tablesorter.com
修改表格
html如下：
<table class="table table-striped table-bordered table-hover tablesorter" id="tbList">
注：為table添加id和class，class必有tablesorter，id可有可無.
css: （詳見文章末尾詳細代碼）
定義表格樣式：表頭、升序、降序等樣式。
排序實現
點擊表頭時，即可對其相應的列進行排序；
js代碼如下：
<script type="text/javascript">
$("#tbList").tablesorter();
//無id時，可以用 $(".tablesorter").tablesorter();
</script>效果如圖：
降序
升序
數據后帶有漢字
對于如圖所示的序號、年齡、進度等各類數字類型的數據，排序功能毫無差錯。
但是，對于如圖所示的課程數、時長、分數等數據后帶有漢字的數據，排序沒什么效果，例如下圖：
降序：
升序：
對于這種情況，可以做如下處理：
js代碼
//自定義排序
$.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"}}}); //表格第六、七、八列 時間格式：xx時xx分xx秒
如上圖所示，顯然要按時間長短來排序，這種數據，比較麻煩。
對于這種情況，可以做如下處理：
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"}}});//表格第七列 排序效果如圖：
降序
升序
代碼
html
<!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" rel="external nofollow" >
<link rel="stylesheet" href="css/tablesorterStyle.css" rel="external nofollow" >
</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>css
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;
}js
// $("#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"}}}); //表格第七列 看完這篇關于詳解JQuery插件tablesorter如何實現表格排序的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
