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 图片预览效果 推荐
Dec 22 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
小程序自定义圆形进度条
Nov 17 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
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python WindowsError的错误代码详解
2017/07/23 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
运动员口号
2014/06/09 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
行政助理岗位职责
2015/02/10 职场文书
出国导师推荐信
2015/03/25 职场文书
仙境之桥观后感
2015/06/16 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python中数组和列表的简单实例
2022/03/25 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js