php tablesorter,jQuery插件 tablesorter 表格排序 使用说明

简介

Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。

使用说明

引入jquery.tablesorter

所用文件下载：

jquery-2.0.2.min.js

jquery.tablesorter.min.js tablesorert 文档

修改表格

html如下：

注：为table添加id和class，class必有tablesorter，id可有可无.

css: (详见文章末尾详细代码)

定义表格样式：表头、升序、降序等样式。

排序实现

点击表头时，即可对其相应的列进行排序；

js代码如下：

$("#tbList").tablesorter();

//无id时，可以用 $(".tablesorter").tablesorter();

效果如图：

降序

升序

数据后带有汉字

对于如图所示的序号、年龄、进度等各类数字类型的数据，排序功能毫无差错。

但是，对于如图所示的课程数、时长、分数等数据后带有汉字的数据，排序没什么效果，例如下图：

降序：

升序：

对于这种情况，可以做如下处理：

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

tablesorter

序号用户名姓名性别年龄课程数时长分数进度

1111test1华东区女2320 门32 分86 分79%2二李二梅男244 门102 分68 分91%3zhaoliu赵六男3018 门57 分84 分37%4iiiaiaia男2014 门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: #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"}}}); //表格第七列

参考资料