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升级新版本后选择器的语法问题
Jun 02 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
再谈JavaScript线程
Jul 10 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
JavaScript 防盗链的原理以及破解方法
Dec 29 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 多维数组排序(usort,uasort)
2010/06/30 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
javascript基本类型详解
2014/11/28 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
vue实现搜索功能
2019/05/28 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Python中列表与元组的乘法操作示例
2018/02/10 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
导购员的岗位职责
2014/02/08 职场文书
工程售后服务承诺书
2014/05/21 职场文书
中层干部考核评语
2015/01/04 职场文书
司考复习计划
2015/01/19 职场文书
论文评审意见
2015/06/05 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python