JQuery插件tablesorter表格排序实现过程解析
更新时间：2020年05月28日 09:03:49 作者：javascript痴痴
这篇文章主要介绍了JQuery插件tablesorter表格排序实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
简介
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。
使用说明
引入jquery.tablesorter
所用文件下载：
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert官网
修改表格
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实现注册会员时密码强度提示信息功能,涉及jQuery事件响应及字符串的遍历、运算与判断等相关操作技巧,需要的朋友可以参考下2017-09-09
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果附演示代码 ，喜欢的朋友可以参考下2013-08-08
使用jQuery可以大大减轻工作量,在实际开发中,使用了jQuery的clone(true)函数,该函数可以创建一个jQury对象的副本,并且参数为true时,可以复制该元素的所有事件处理函数。2011-01-01
jQuery参数列表集合，学习jquery的朋友可以收藏下。2011-04-04
Jquery+ajax请求data显示在GridView上(asp.net)
Jquery ajax请求data显示在asp.net中GridView控件上，需要的朋友可以参考下。2010-08-08
听朋友说要作个九宫格，我也就随便写一个，等待完善2012-08-08
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
本文为大家介绍下jQuery+JSON+jPlayer实现QQ空间音乐查询，具体的实现过程感兴趣的朋友可以了解下哈，希望对大家有所帮助2013-06-06
今天小编就为大家分享一篇jquery弹窗时禁止body滚动条滚动的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细解析了jQuery插件cxSelect多级联动下拉菜单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
jQuery dateRangePicker插件使用方法详解
这篇文章主要为大家详细介绍了jQuery dateRangePicker插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论