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”。感兴趣的朋友可以自己新建字库来解决这个问题。

时间: 2024-07-29 04:24:07

jQuery的dataTables插件实现中文排序的相关文章

使用jquery的tablesorter插件进行表格排序

今天在学习bootstrap的时候,突然看见tablesorter这个东东了,立马百度了一下,发现了这个东东.. 下面说一下今天我在项目中看见前辈们用的表格排序 tablesorter的官方网站:http://tablesorter.com/docs/ 使用方法:1.下载tablesorter http://tablesorter.com/jquery.tablesorter.zip 2.解压文件,将jquery和jquery.tablesorter.min.js导入到项目文件中 3.修改htm

jquery 的datatables插件问题(多列排序)

//按第二列降序排序, 出现提示: Datables wrning(table id='example'):Cannot reinitialise DataTable. To retrieve theDatables object for this table,please pass eithser no arguments to the dataTable() function, 解决方法: 1.加 "bDestroy":true,和"bRetrieve": tr

解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的实用性.但是再好的程序也会有瑕疵,项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引.会多次提交刷新数据(有多少列会提交刷新多少次). 为解决这个问题尝试了很多种

JQuery DataTables 列自定义数据类型排序

使用JQ DataTables 的时候,希望某列自定义类型数据可以进行排序,操作如下: 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSort['number-fate-asc']  = function(s1,s2) { s1 = s1.replace('%',''); s2 = s2.replace('%',''); return s1-s2; }; jQuery.fn.dataTableExt.oSort['number-fate-desc'] = f

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

dataTables 插件学习整理

在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dataTables 的样式 <link rel="stylesheet" href="jquery.dataTables.css"> <script src="jquery.dataTable.js"> 2. bootstrap

Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)

首先得先引入对应的js 1.jquery.min.js  首先导入 2. File:        jquery.dataTables.min.js Version:     1.9.4     这是我使用的版本 这是  jsp 页面 关键的table  代码 <table id="fuck" class="table table-bordered data-table"> <thead> <tr> <span style=

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用