最近在写Java web。

写JSP的时候发现一个很好玩的插件dataTables。分页、过滤、排序等等手到擒来。

哎哎哎,有点点可惜的是排序这个功能不支持中文。于是网上查查找找,现在把方法整理一下,与君共享。

 <script type="text/javascript">

     // oSort是排序类型数组, 'chinese-asc'是自己定义的类型的排序(*-asc || *-desc)名称
// 插件应该会根据表格中的内容的类型(string, number, chinese)进行比较排序,
// 如果以chinese类型来排序则用oSort['chinese-asc']和oSort['chinese-desc']的方法
// oSort对应的function里面自定义比较方法
jQuery.fn.dataTableExt.oSort['chinese-asc'] = function(x,y) {
//javascript自带的中文比较函数,具体用法可自行查阅了解
return x.localeCompare(y);
}; jQuery.fn.dataTableExt.oSort['chinese-desc'] = function(x,y) {
return y.localeCompare(x);
}; // aTypes是插件存放表格内容类型的数组
// reg赋值的正则表达式,用来判断是否是中文字符
// 返回值push到aTypes数组,排序时扫描该数组,'chinese'则调用上面两个方法。返回null默认是'string'
jQuery.fn.dataTableExt.aTypes.push(function(sData) {
var reg =/^[\u4e00-\u9fa5]{0,}$/;
if(reg.test(sData)) {
return 'chinese';
}
return null;
}); $(document).ready(function(){
$('#tableId').dataTable({
});
}); </script>

需要注意的是,jQuery.fn.dataTableExt相关的三个函数必须写在$(document).ready(function(){});前面,否则中文排序失效。

另另另,我觉得奇怪的地方,就是localeCompare() 函数对中文拼音的认知似乎有点问题,例如“沈”的默认拼音首字母竟然是“c”。感兴趣的朋友可以自己新建字库来解决这个问题。

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

  1. 黄聪:JQUERY的datatables插件,Date range filter时间段筛选功能

    需配合moment插件实现:http://momentjs.com/ 演示:http://live.datatables.net/zuciyawi/1/edit HTML代码 <!DOCTYPE ...

  2. jquery 的datatables插件问题

      翻页后js失效: 重绘事件-当表格重绘完成后 重新绑定事件: draw.dt $('#example').dataTable(); $('#example').on( 'draw.dt', fun ...

  3. jquery,Datatables插件使用,做根据【日期段】筛选数据的功能 jsp

     时间格式为yyyymmdd,通过转换为int类型进行比较大小 画面: jsp代码: 1 //日期显示控件,使用h-ui框架 2 3 <div class="text-c"& ...

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

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  5. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  6. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  7. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  8. jQuery常用特效插件汇总

    jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/   1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...

  9. dataTables 插件学习整理

    在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...

随机推荐

  1. JPA 系列教程 异常 集锦

    异常1.hibernate升级到3.5版本 异常信息摘要: Associations marked as mappedBy must not define database mappings like ...

  2. Linux中的shell函数编写

    function huge_cp() { while read line1; do cp $line1 ../; done; } function huge_rm() { while read lin ...

  3. python基础---pymsql

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 一.下载安装 pip3 install pymysql 二.使用 1.执行SQL #!/usr/bin/env ...

  4. PhotonServer 学习

    版本:Photon-OnPremise-Server-SDK_v3-4-31-10808 输出文件夹:deploy/名称/bin PhotonServer.config 配置 <Applicat ...

  5. CSS兼容的一些问题

    DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 ...

  6. openstack私有云布署实践【5 数据库MariaDB 集群】

    kxcontroller1   kxcontroller2  controller1 这3台作角色 确保服务器的域名解析访问正常   确保NTP时间同步   配置HAproxy主备访问,其中的一项数据 ...

  7. 计算机网络课程优秀备考PPT之第三章数据链路层(三)

    为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 计算机网络课程优秀备考PPT之第 ...

  8. 理解Nodejs中的事件轮询机制

    我在看<了不起的Nodejs>一书,阻塞与非阻塞IO那一章我来回看了N遍,然后...还是没太看懂..于是我找到了这篇日志,写的是真的有点好啊..潸然泪下.. 原文:http://www.r ...

  9. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  10. vim 替换

    摘自: vim替换命令 替換(substitute) :[range]s/pattern/string/[c,e,g,i] range 指的是範圍,1,7 指從第一行至第七行,1,$ 指從第一行至最後 ...