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客户端解决方案 缓存提供程序
Jul 14 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
设定php简写功能的方法
2019/11/28 PHP
JavaScript中的其他对象
2008/01/16 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
详解vue 实例方法和数据
2017/10/23 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
电气专业应届生求职信
2013/11/01 职场文书
ktv好的活动方案
2014/08/15 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书