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 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
Dojo 学习要点
Sep 03 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 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
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python日期的加减等操作的示例
2017/08/15 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python浪漫表白源码
2019/04/05 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
团员的自我评价
2013/12/01 职场文书
广告设计应届生求职信
2014/03/01 职场文书
临时租车协议范本
2014/09/23 职场文书
优秀党支部申报材料
2014/12/24 职场文书
写给医生的感谢信
2015/01/22 职场文书
报名委托书
2015/01/29 职场文书
无工作证明怎么写
2015/06/15 职场文书
养成教育工作总结
2015/08/13 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
晚会开幕词范文
2016/03/04 职场文书
警用民用对讲机找不同
2022/02/18 无线电