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日程管理控件glDatePicker用法详解
Mar 29 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
5.PHP的其他功能
2006/10/09 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
浅谈开发eslint规则
2018/10/01 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
浅谈python中set使用
2016/06/30 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python之re操作方法(详解)
2017/06/14 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python argparse模块使用方法解析
2020/02/20 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
印尼旅游网站:via
2017/11/12 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
电信专业应届生自荐信
2013/09/28 职场文书
物业管理应届生求职信
2013/10/28 职场文书
园艺师求职信
2014/04/27 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python