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 相关文章推荐
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jquery操作angularjs对象
Jun 26 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
vue动态渲染svg、添加点击事件的实现
Mar 13 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php获取淘宝分类id示例
2014/01/16 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python对url格式解析的方法
2015/05/13 Python
Python打印斐波拉契数列实例
2015/07/07 Python
python版学生管理系统
2018/01/10 Python
python实现画圆功能
2018/01/25 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
大学社团活动策划书
2014/01/26 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年导购员工作总结
2015/04/25 职场文书
主持人大赛开场白
2015/05/29 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技