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 相关文章推荐
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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中Session可能会引起并发问题
2015/07/23 PHP
Yii2中datetime类的使用
2016/12/17 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
python更新列表的方法
2015/07/28 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
2014超市双十一活动策划方案
2014/09/29 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android