详解JQuery插件tablesorter如何实现表格排序

小编这次要给大家分享的是详解JQuery插件tablesorter如何实现表格排序,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

我们提供的服务有:成都网站设计、网站建设、外贸网站建设、微信公众号开发、网站优化、网站认证、大安市ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的大安市网站制作公司

简介

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

使用说明

引入jquery.tablesorter

所用文件下载:

jquery-2.0.2.min.js

jquery.tablesorter.min.js tablesorert官网

http://tablesorter.com

修改表格

html如下:

注:为table添加id和class,class必有tablesorter,id可有可无.

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

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

排序实现

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

js代码如下:

效果如图:

降序

详解JQuery插件tablesorter如何实现表格排序

升序

详解JQuery插件tablesorter如何实现表格排序

数据后带有汉字

对于如图所示的序号、年龄、进度等各类数字类型的数据,排序功能毫无差错。
但是,对于如图所示的课程数、时长、分数等数据后带有汉字的数据,排序没什么效果,例如下图:

降序:

详解JQuery插件tablesorter如何实现表格排序

升序:

详解JQuery插件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秒

详解JQuery插件tablesorter如何实现表格排序

如上图所示,显然要按时间长短来排序,这种数据,比较麻烦。

对于这种情况,可以做如下处理:

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"}}});//表格第七列 

排序效果如图:

降序

详解JQuery插件tablesorter如何实现表格排序

升序

详解JQuery插件tablesorter如何实现表格排序

代码

html





  
  tablesorter
  
  



  
序号 用户名 姓名 性别 年龄 课程数 时长 分数 进度
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: #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如何实现表格排序的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。


网站标题:详解JQuery插件tablesorter如何实现表格排序
标题来源:http://scyanting.com/article/ppsogo.html

其他资讯