Juery解决tablesorter中文排序和字符范围的方法


Posted in Javascript onMay 06, 2015

本文实例讲述了Juery解决tablesorter中文排序和字符范围的方法。分享给大家供大家参考。具体分析如下:

tablesorter是jQuery插件中比较优秀的一款表格排序插件,我相信大家都使用过或有所耳闻,我在这里就不过多介绍了,详细信息可以看看官方网站:http://tablesorter.com/docs/(其中的demo做得比较完整)。

在使用了tablesorter开发的几个项目中,发现了两种类型的排序存在问题,如下:

第一个问题是无法对中文字符进行排序,这是因为在对字符排序时,是使用的unicode值进行的字符大小比较,代码如下:

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 < b) ? -1 : ((a > b) ? 1 : 0));
};
function sortTextDesc(a,b) {
  return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};

而我们想要得到的结果是按汉字拼音进行顺序进行排序,因此我们将代码修改为以下代码即可:

Js代码

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

localeCompare方法是JS自带的方法,不用多说,望文生义就知道这个方法是根据当前区域下对字符的大小进行比较,不过这个方法无法处理多音字。

第二个问题是无法对超出了范围的数值型数据进行排序,这是因为在进行数值类型转换时,存在数据值失真的情况,例如:

Js代码

alert(parseFloat('9999999999999999'));  // 10000000000000000
alert(parseFloat('10000000000000001')); // 10000000000000000
alert(parseFloat('10000000000000004')); // 10000000000000004
alert(parseFloat('10000000000000005')); // 10000000000000004
alert(parseFloat('10000000000000006')); // 10000000000000006
alert(parseFloat('9999999999999999'));  // 10000000000000000
alert(parseFloat('10000000000000001')); // 10000000000000000
alert(parseFloat('10000000000000004')); // 10000000000000004
alert(parseFloat('10000000000000005')); // 10000000000000004
alert(parseFloat('10000000000000006')); // 10000000000000006

这样的偏差会使得排序结果不准确,为了避免这种问题,应该不使用原始值进行比较,而是应该引入权值,数值从左到右,每一位数值对应的权值递减,然后根据权值和原始值计算出的新值用于比较,这就只需要修改formatFloat方法就能解决这个问题了。

Js代码

this.formatFloat = function(s) {    
  // TODO    
  var i = parseFloat(s);    
  return (isNaN(i)) ? 0 : i;    
};

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
javascript操作表格排序实例分析
May 06 #Javascript
js获取form的方法
May 06 #Javascript
js给selected添加options的方法
May 06 #Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 #Javascript
js实现漂浮回顶部按钮实例
May 06 #Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 #Javascript
js中日期的加减法
May 06 #Javascript
You might like
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
js轮播图代码分享
2016/07/14 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python创建进程fork用法
2015/06/04 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
质量工程师岗位职责
2013/11/16 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
四年级学生评语大全
2014/04/21 职场文书
高中班主任评语大全
2014/04/25 职场文书
大学生暑期实践报告
2015/07/13 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers