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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
小程序实现文字循环滚动动画
Jun 14 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
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Django开发中的日志输出的方法
2018/07/02 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python实现画循环圆
2019/11/23 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
篮球比赛口号
2014/06/10 职场文书
开展创先争优活动总结
2014/08/28 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
学习保证书
2015/01/17 职场文书
展览会邀请函
2015/02/02 职场文书
环境建议书
2015/02/04 职场文书
开学典礼观后感
2015/06/15 职场文书
学生会招新宣传语
2015/07/13 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技