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实现动画效果的实例代码
May 07 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
js转换对象为xml
Feb 17 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
Angular简单验证功能示例
Dec 22 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
js中实现继承的五种方法
Jan 25 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使用DES进行加密与解密的方法详解
2013/06/06 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
详解React的回调渲染模式
2020/09/10 Javascript
urllib2自定义opener详解
2014/02/07 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python代码实现KNN算法
2017/12/20 Python
mac系统安装Python3初体验
2018/01/02 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
基于python实现学生管理系统
2018/10/17 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
日语翻译个人求职的自我评价
2013/10/14 职场文书
市场营销工作计划书
2014/05/06 职场文书
淘宝店策划方案
2014/06/07 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书