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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现增删改查
Dec 22 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
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
python实现简单神经网络算法
2018/03/10 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
办公室年终个人自我评价
2013/10/28 职场文书
外贸专业求职信
2014/03/09 职场文书
师德演讲稿范文
2014/05/06 职场文书
工商管理专业自荐信
2014/06/03 职场文书
普通话宣传标语
2014/06/26 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
心理健康教育主题班会
2015/08/13 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
python游戏开发Pygame框架
2022/04/22 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS