Juery解決tablesorter中文排序和字符范圍的方法
本文實(shí)例講述了Juery解決tablesorter中文排序和字符范圍的方法。分享給大家供大家參考。具體分析如下：
tablesorter是jQuery插件中比較優(yōu)秀的一款表格排序插件，我相信大家都使用過(guò)或有所耳聞，我在這里就不過(guò)多介紹了，詳細(xì)信息可以看看官方網(wǎng)站：http://tablesorter.com/docs/（其中的demo做得比較完整）。
在使用了tablesorter開(kāi)發(fā)的幾個(gè)項(xiàng)目中，發(fā)現(xiàn)了兩種類(lèi)型的排序存在問(wèn)題，如下：
第一個(gè)問(wèn)題是無(wú)法對(duì)中文字符進(jìn)行排序，這是因?yàn)樵趯?duì)字符排序時(shí)，是使用的unicode值進(jìn)行的字符大小比較，代碼如下：
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));
};
而我們想要得到的結(jié)果是按漢字拼音進(jìn)行順序進(jìn)行排序，因此我們將代碼修改為以下代碼即可：
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自帶的方法，不用多說(shuō)，望文生義就知道這個(gè)方法是根據(jù)當(dāng)前區(qū)域下對(duì)字符的大小進(jìn)行比較，不過(guò)這個(gè)方法無(wú)法處理多音字。
第二個(gè)問(wèn)題是無(wú)法對(duì)超出了范圍的數(shù)值型數(shù)據(jù)進(jìn)行排序，這是因?yàn)樵谶M(jìn)行數(shù)值類(lèi)型轉(zhuǎn)換時(shí)，存在數(shù)據(jù)值失真的情況，例如：
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
這樣的偏差會(huì)使得排序結(jié)果不準(zhǔn)確，為了避免這種問(wèn)題，應(yīng)該不使用原始值進(jìn)行比較，而是應(yīng)該引入權(quán)值，數(shù)值從左到右，每一位數(shù)值對(duì)應(yīng)的權(quán)值遞減，然后根據(jù)權(quán)值和原始值計(jì)算出的新值用于比較，這就只需要修改formatFloat方法就能解決這個(gè)問(wèn)題了。
Js代碼
this.formatFloat = function(s) {
// TODO
var i = parseFloat(s);
return (isNaN(i)) ? 0 : i;
};
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery排序插件tableSorter使用方法
- tablesorter.js表格排序使用方法(支持中文排序)
- 修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)
- jQuery表格排序組件-tablesorter使用示例
- jquery tablesorter.js 支持中文表格排序改進(jìn)
- TableSort.js表格排序插件使用方法詳解
- javascript 表格排序和表頭浮動(dòng)效果(擴(kuò)展SortTable)
- Auntion-TableSort國(guó)人寫(xiě)的一個(gè)javascript表格排序的東西
- jQuery html表格排序插件tablesorter使用方法詳解
相關(guān)文章
jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom
Highslide是一個(gè)非常美觀的圖片燈箱插件，下面這篇文章主要給大家介紹了關(guān)于jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
『jQuery』名稱(chēng)沖突使用noConflict方法解決
jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)介方式。某些其他 JavaScript 庫(kù)中的函數(shù)（比如 Prototype）同樣使用 $ 符號(hào)，這樣就會(huì)發(fā)生名稱(chēng)沖突，使用名為 noConflict() 的方法來(lái)解決該問(wèn)題2013-04-04
這篇文章主要介紹了jQuery選擇器之層次選擇器用法,結(jié)合實(shí)例形式分析了jQuery后代元素選擇器、子元素選擇器、相鄰元素選擇器、兄弟元素選擇器等相關(guān)使用技巧,需要的朋友可以參考下2019-02-02
jQuery .attr()和.removeAttr()方法操作元素屬性示例
本文為大家詳細(xì)介紹下如何使用jQuery的.attr()和.removeAttr()方法讀取，添加，修改，刪除元素的屬性，不會(huì)的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單的簡(jiǎn)單實(shí)例演示，可以選擇對(duì)應(yīng)省、市、縣，希望大家可以喜歡。2015-11-11
jQuery布局插件UI Layout簡(jiǎn)介及使用方法
UI Layout是一種基于jQuery的布局框架，其核心是一個(gè)大小自適應(yīng)的中心面板，面板的上下左右四個(gè)方向可以放置可折疊、可縮放的面板，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了jquery實(shí)現(xiàn)增加刪除行的方法,涉及表格中行的增加與刪除技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery $.extend()用法,需要的朋友可以參考下2014-06-06
性能優(yōu)化遇到很多細(xì)節(jié)問(wèn)題(for與each性能比較)記錄下來(lái)分享給大家，希望對(duì)你有所幫助2013-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)朋友圈查看圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09