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

简介

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>

效果如图：

降序

升序

数据后带有汉字

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

降序：

升序：

对于这种情况，可以做如下处理：

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秒

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

对于这种情况，可以做如下处理：

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

排序效果如图：

降序

升序

代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery插件实现图片轮播效果

    使用插件实现图片轮播效果: 通过设置传入的参数autoScroll,numControl和arrowControl的值可以显示不同的效果 图片轮播效果一:设置autoScroll=true,numControl=false,arrowControl=false,图片自动轮播,当鼠标进入时停止轮播,当鼠标移出时继续轮播: 图片轮播效果二:设置autoScroll=true,numControl=ture,arrowControl=false,图片自动轮播,同时当鼠标指向导航数字时显示相应的图片:

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • 详解jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

  • jQuery实现的分页插件完整示例

    本文实例讲述了jQuery实现的分页插件.分享给大家供大家参考,具体如下: 呈现 html文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="引入一个jquery文件,这里就不提供了&

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • jQuery弹框插件使用方法详解

    本文实例为大家分享了jQuery弹框插件使用的具体代码,供大家参考,具体内容如下 要点 : 1.匿名函数包裹器(可搜索一下) 2.面向对象的编程 3.插件的要素(扩展jQuery本身的方法,$.extend : 给jQuery对象添加方法,对jQuery.prototype进行扩展 :添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称) 4.代码部分: 注意html中 a 标签的内容 , js中格式的注意 , css的话嫌麻烦你可以自己定义 5

  • jquery实现异步加载图片（懒加载图片一种方式）

    首先将插件在jq后面引入 (function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = t

  • 基于jquery的图片懒加载js

    以下是实现代码(基于jquery): 复制代码 代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img

  • jquery插件懒加载的示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="jquery-1.11.1.min.js&q

随机推荐