jQuery的dataTables插件實現中文排序


最近在寫Java web。

寫JSP的時候發現一個很好玩的插件dataTables。分頁、過濾、排序等等手到擒來。

哎哎哎,有點點可惜的是排序這個功能不支持中文。於是網上查查找找,現在把方法整理一下,與君共享。

 1 <script type="text/javascript">
 2     
 3     // oSort是排序類型數組, 'chinese-asc'是自己定義的類型的排序(*-asc || *-desc)名稱
 4     // 插件應該會根據表格中的內容的類型(string, number, chinese)進行比較排序,
 5     // 如果以chinese類型來排序則用oSort['chinese-asc']和oSort['chinese-desc']的方法
 6     // oSort對應的function里面自定義比較方法
 7     jQuery.fn.dataTableExt.oSort['chinese-asc'] = function(x,y) {
 8         //javascript自帶的中文比較函數,具體用法可自行查閱了解
 9         return x.localeCompare(y);
10     };
11      
12     jQuery.fn.dataTableExt.oSort['chinese-desc'] = function(x,y) {
13         return y.localeCompare(x);
14     };
15     
16     // aTypes是插件存放表格內容類型的數組
17     // reg賦值的正則表達式,用來判斷是否是中文字符
18     // 返回值push到aTypes數組,排序時掃描該數組,'chinese'則調用上面兩個方法。返回null默認是'string'
19     jQuery.fn.dataTableExt.aTypes.push(function(sData) {
20         var reg =/^[\u4e00-\u9fa5]{0,}$/;
21         if(reg.test(sData)) {
22             return 'chinese';
23         }
24         return null;
25     });
26     
27     $(document).ready(function(){  
28         $('#tableId').dataTable({
29         });
30     });
31 
32  </script>

需要注意的是,jQuery.fn.dataTableExt相關的三個函數必須寫在$(document).ready(function(){});前面,否則中文排序失效。

另另另,我覺得奇怪的地方,就是localeCompare() 函數對中文拼音的認知似乎有點問題,例如“沈”的默認拼音首字母竟然是“c”。感興趣的朋友可以自己新建字庫來解決這個問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM