作者:早安丶晚安丶英语连_691 | 来源:互联网 | 2023-09-11 21:55
简介Tablesorter是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。使用说明引入j
简介
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
使用说明
引入jquery.tablesorter
所用文件下载:
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert 文档
修改表格
html如下:
注:为table添加id和class,class必有tablesorter,id可有可无.
css: (详见文章末尾详细代码)
定义表格样式:表头、升序、降序等样式。
排序实现
点击表头时,即可对其相应的列进行排序;
js代码如下:
效果如图:
数据后带有汉字
对于如图所示的序号、年龄、进度等各类数字类型的数据,排序功能毫无差错。
但是,对于如图所示的课程数、时长、分数等数据后带有汉字的数据,排序没什么效果,例如下图:
降序:
升序:
对于这种情况,可以做如下处理:
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"}}});//表格第七列
排序效果如图:
降序
升序
更多处理情况,参见http://www.cnblogs.com/dwnblo…
代码html
|
1 |
111test1 |
华东区 |
女 |
23 |
20 门 |
32 分 |
86 分 |
79% |
2 |
二 |
李二梅 |
男 |
24 |
4 门 |
102 分 |
68 分 |
91% |
3 |
zhaoliu |
赵六 |
男 |
30 |
18 门 |
57 分 |
84 分 |
37% |
4 |
iii |
aiaia |
男 |
20 |
14 门 |
92 分 |
79 分 |
9% |
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: ##;
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: ##;
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"}}}); //表格第七列
参考资料
- tablesorert 文档
- tableSorter使用介绍 http://www.cnblogs.com/dwnblo…
- 使用jquery的tablesorter插件进行表格排序 http://www.2cto.com/kf/201303…
- jQuery表格排序插件 tablesorter http://www.oschina.net/p/tabl…
推荐阅读
-
首页#father{border:0pxso ...
[详细]
蜡笔小新 2024-09-27 17:56:58
-
子元素过滤器在页面设计过程中需要突出某些行时,可以通过基本过滤选择器中的:eq()来实现表单中行的凸显,但不能同时让多个表具有相同的效果。在jQuer ...
[详细]
蜡笔小新 2024-09-27 04:00:36
-
-
使用html2canvas截图网页全页或者某个元素 ...
[详细]
蜡笔小新 2024-09-25 13:50:20
-
本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章,第2.2节,作者:党 建更多章节内容可以访问云栖社区“华章计算机”公众号查看。2.2 前端代码重构代码 ...
[详细]
蜡笔小新 2024-09-28 11:34:29
-
这两天做了一个小项目,里面有个下载进度的进度条需要制作。先看呈现的效果:点击进度,然后依次递增,直到递增到百分之百。现在把这部分代码分享下来。<!DOCTYPEhtml><html ...
[详细]
蜡笔小新 2024-09-27 14:38:43
-
IE下PHPiframe跨域导致session丢失问题的解决方法|一个登录页面,被别的网站用iframe嵌进去后,死活无法登录(只在IE中存在这种情况)。主要是session无 ...
[详细]
蜡笔小新 2024-09-25 20:43:55
-
CSS样式body{font-size:12px;}.menuBox{width:50%;height:auto;margin:0auto;}.menuBoxul{margin:0 ...
[详细]
蜡笔小新 2024-09-25 15:06:41
-
利用JavaScript的函数有两种方式1.jQueryjQuery.inArray(value,array[,fromIndex])value类型: Anything要查找的值。 ...
[详细]
蜡笔小新 2024-09-25 08:48:15
-
rbac4表常规设计设计模型:1、管理员表(users)Schema::create('users',function(Blueprint$table){$tabl ...
[详细]
蜡笔小新 2024-09-29 11:44:38
-
packagetest;importjava.io.FileInputStream;importjava.io.FileOutputStream;importjava.io.IOE ...
[详细]
蜡笔小新 2024-09-29 11:41:36
-
媒介这里大部份是本身碰到过的状况,另有一部份自创了偕行的文章,假如人人有碰到别的坑,迎接提出来一同研讨。学问要点1.Meta标签1.制止用户缩放页面,页面强迫让文档的宽度与装备的宽 ...
[详细]
蜡笔小新 2024-09-27 18:54:57
-
结束jquery时间不长,写代码感觉很生,而且敢接写起来很费劲做点简单的总结。首先主要要先引入.juery.js文件第二一些js插件文件也要在jquer ...
[详细]
蜡笔小新 2024-09-26 12:38:56
-
bootstrap-datetimepicker日期控件简单使用应用场景:表单日期 ...
[详细]
蜡笔小新 2024-09-25 17:57:54
-
jqueryui中dialog和easyui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件。1.实例官网源代码中给出了一些实例,首先看看实例是什么样子的。 a.默认功能也是最简单的应用,也就是打开一个对话框,代码如下&amp;lt;!doctypehtml&amp;gt;&amp;lt;html ...
[详细]
蜡笔小新 2024-09-25 13:11:11
-
软件自动化测试的学习步骤软件测试交流群关注软件测试技术公众号获取阅读目录软件自动化测试的学习步骤自动化测试的本质自动化测试学习的误区自动化测试的职位自动化测试分类Web自动化 ...
[详细]
蜡笔小新 2024-09-30 01:54:19
-
早安丶晚安丶英语连_691
这个家伙很懒,什么也没留下!