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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
vue路由实现登录拦截
Mar 24 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
国内咖啡文化
2021/03/03 咖啡文化
用缓存实现静态页面的测试
2006/12/06 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
《诺贝尔》教学反思
2014/02/17 职场文书
竞赛口号大全
2014/06/16 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
亮剑精神观后感
2015/06/05 职场文书
三八妇女节致辞
2015/07/31 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python