DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Juery解決tablesorter中文排序和字符范圍的方法
Juery解決tablesorter中文排序和字符范圍的方法
編輯:JavaScript綜合知識     

   這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下

  tablesorter是jQuery插件中比較優秀的一款表格排序插件,我相信大家都使用過或有所耳聞,我在這裡就不過多介紹了,詳細信息可以看看官方網站:http://tablesorter.com/docs/(其中的demo做得比較完整)。

  在使用了tablesorter開發的幾個項目中,發現了兩種類型的排序存在問題,如下:

  第一個問題是無法對中文字符進行排序,這是因為在對字符排序時,是使用的unicode值進行的字符大小比較,代碼如下:

  Js代碼

  ?

1 2 3 4 5 6 7 8 9 10 11 12 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代碼

  ?

1 2 3 4 5 6 7 8 9 10 11 12 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代碼

  ?

1 2 3 4 5 6 7 8 9 10 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代碼

  ?

1 2 3 4 5 this.formatFloat = function(s) { // TODO var i = parseFloat(s); return (isNaN(i)) ? 0 : i; };

  希望本文所述對大家的jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved