Juery解決tablesorter中文排序和字符范圍的方法
本文實例講述了Juery解決tablesorter中文排序和字符范圍的方法。分享給大家供大家參考。具體分析如下:
tablesorter是jQuery插件中比較優(yōu)秀的一款表格排序插件,我相信大家都使用過或有所耳聞,我在這里就不過多介紹了,詳細信息可以看看官方網(wǎng)站:http://tablesorter.com/docs/(其中的demo做得比較完整)。
在使用了tablesorter開發(fā)的幾個項目中,發(fā)現(xiàn)了兩種類型的排序存在問題,如下:
第一個問題是無法對中文字符進行排序,這是因為在對字符排序時,是使用的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)); };
而我們想要得到的結(jié)果是按漢字拼音進行順序進行排序,因此我們將代碼修改為以下代碼即可:
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自帶的方法,不用多說,望文生義就知道這個方法是根據(jù)當前區(qū)域下對字符的大小進行比較,不過這個方法無法處理多音字。
第二個問題是無法對超出了范圍的數(shù)值型數(shù)據(jù)進行排序,這是因為在進行數(shù)值類型轉(zhuǎn)換時,存在數(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
這樣的偏差會使得排序結(jié)果不準確,為了避免這種問題,應(yīng)該不使用原始值進行比較,而是應(yīng)該引入權(quán)值,數(shù)值從左到右,每一位數(shù)值對應(yīng)的權(quán)值遞減,然后根據(jù)權(quán)值和原始值計算出的新值用于比較,這就只需要修改formatFloat方法就能解決這個問題了。
Js代碼
this.formatFloat = function(s) { // TODO var i = parseFloat(s); return (isNaN(i)) ? 0 : i; };
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
Enter回車切換輸入焦點實現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車切換輸入焦點實現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下2014-09-09深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對jQuery中l(wèi)ive與bind方法的區(qū)別進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery動態(tài)顯示和隱藏datagrid中的某一列的方法
動態(tài)顯示和隱藏datagrid中的某一列的方法有很多,在接下來的文章中為大家介紹下jQuery是如何實現(xiàn)的2013-12-12jquery UI Datepicker時間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件沖突問題的解決,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12原生Aajax 和jQuery Ajax 寫法個人總結(jié)
AJAX:即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。本文重點給大家介紹原生Aajax 和jQuery Ajax 個人總結(jié),一起看看吧2017-03-03jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
這篇文章主要介紹了jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法,結(jié)合實例形式分析了jQuery.eraser.js插件的功能、使用方法與相關(guān)注意事項,并附帶eraser.js插件源碼供讀者下載使用,需要的朋友可以參考下2017-04-04jQuery插件jFade實現(xiàn)鼠標經(jīng)過的圖片高亮其它變暗
本文給大家介紹的是一款重點突出的jQuery特效插件效果,使用jFade實現(xiàn)鼠標經(jīng)過的圖片高亮其它變暗,非常實用,推薦給小伙伴們參考下。2015-03-03