JQuery插件tablesorter表格排序实现过程解析


Posted in jQuery onMay 28, 2020

简介

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>

效果如图:

降序

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

<!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复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
You might like
如何让CI框架支持service层
2014/10/29 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JavaScript 特殊字符
2007/04/05 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
django数据库自动重连的方法实例
2019/07/21 Python
django云端留言板实例详解
2019/07/22 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
班风学风建设方案
2014/05/06 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
技校毕业生自荐书
2014/05/23 职场文书
护士求职信范文
2014/05/24 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
入党转正介绍人意见
2015/06/03 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技