tablesorter.js表格排序使用方法(支持中文排序)


Posted in Javascript onFebruary 10, 2017

最近,因为项目需要,对表格排序做了一下摸索,整理如下:

1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改:

部分源码:

function sortText(a, b) {
  return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
function sortTextDesc(a, b) {
  return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};

修改后:

function sortText(a,b) {  
  return a.localeCompare(b);  
};  
function sortTextDesc(a,b) {  
  return b.localeCompare(a);  
};

修改完之后的js可支持中文的排序。

2.建立一个表格,格式如下:

<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tr><td></td></tr>
</table>
<html>
<head>
  <title>jquery.tablesorter</title>
  <script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="/manage/plugin/tablesorter/tablesorter.js"></script>
  <link rel="stylesheet" href="/manage/plugin/tablesorter/blue/style.css type=" rel="external nofollow" text/css" />

  <script type="text/javascript">
    $("#mytable").tablesorter();
  </script>
</head>
<body>
<table id="mytable" border="1" class="tablesorter">
  <thead>
    <tr>
      <th class="header">First Name</th>   
      <th class="header">Last Name</th>   
      <th class="header">Age</th>   
      <th class="header">Total</th>   
      <th class="header">Discount</th>   
      <th class="header">Date</th>
      <th class="header">State</th>
    </tr>
  </thead>
  <tr>   
    <td>Peter</td>   
    <td>Parker</td>   
    <td>28</td>   
    <td>$9.99</td>   
    <td>20%</td>      
    <td>Jul 6, 2006 8:14 AM</td>
    <td>已审核</td> 
  </tr>   
  <tr>   
    <td>John</td>   
    <td>Hood</td>   
    <td>33</td>   
    <td>$19.99</td>   
    <td>25%</td>      
    <td>Dec 10, 2002 5:14 AM</td> 
    <td>已审核</td>   
  </tr>   
  <tr>   
    <td>Clark</td>   
    <td>Kent</td>   
    <td>18</td>   
    <td>$15.89</td>   
    <td>44%</td>   
    <td>Jan 12, 2003 11:14 AM</td> 
    <td>已作废</td>   
  </tr>   
  <tr>   
    <td>Bruce</td>   
    <td>Almighty</td>   
    <td>45</td>   
    <td>$153.19</td>   
    <td>44%</td>      
    <td>Jan 18, 2001 9:12 AM</td>
    <td>待审核</td> 
  </tr>   
  <tr>   
    <td>Bruce</td>   
    <td>Evans</td>   
    <td>22</td>   
    <td>$13.19</td>   
    <td>11%</td>   
    <td>Jan 18, 2007 9:12 AM</td>
    <td>已生效</td> 
  </tr>
</table>
</body>
</html>

页面显示如图所示:

tablesorter.js表格排序使用方法(支持中文排序)

点击表头,就能够排序。

注:

1).若是第五列、第六列不需要排序,代码如下:

$("#mytable").tablesorter({headers:{4:{sorter:false},5:{sorter:false}}});

(顺便需要去掉对应列的样式)

2).若是第五列需要自定义排序方式,第六列不排序,代码如下:

$.tablesorter.addParser({
  id: "grade", //指定一个唯一的ID
  is: function(s){
    return false;
  },
  format: function(s){
    return s.toLowerCase().replace(/已作废/,1).replace(/待审核/,2).replace(/已审核/,3).replace(/已生效/,4); //将中文换成数字
  },
  type: "numeric" //按数值排序
});

$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}});

需要更多例子,可以到官网研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 #Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 #Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 #Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
You might like
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
angular4自定义组件详解
2017/09/28 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
使用python去除图片白色像素的实例
2019/12/12 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
自我鉴定书范文
2013/10/02 职场文书
公务员的自我鉴定
2013/10/26 职场文书
小学班主任寄语大全
2014/04/04 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript