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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vant 中van-list的用法说明
Nov 11 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修改指定文件后缀的方法
2014/09/11 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python基础之文件读取的讲解
2019/02/16 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
网游商务专员求职信
2013/10/15 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
五年级音乐教学反思
2014/02/06 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
项目施工员岗位职责
2014/03/09 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
酒店节能减排方案
2014/05/26 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python