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和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
如何在vue 中引入使用jquery
Nov 10 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中通过curl检测页面是否被百度收录
2013/09/27 PHP
php创建无限级树型菜单
2015/11/05 PHP
原生js实现日期联动
2015/01/12 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
Vue实现简单分页器
2018/12/29 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
vue3实现v-model原理详解
2019/10/09 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python中logging库的使用总结
2017/10/18 Python
深入理解Python3 内置函数大全
2017/11/23 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python中的常量和变量代码详解
2018/07/25 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
幼儿园秋季开学寄语
2014/08/02 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android