jQuery.dataTables 中文乱序 (后台是有序) 自定义排序
来源:互联网 发布:淘宝怎样不被厂家投诉 编辑:程序博客网 时间:2024/06/06 02:05
实际在使用datatables时,第一列是中文,观察后台返回的数据是有序的list,使用ajax传送到前台显示的时候,就乱序了,一个神奇的解决方式是自定义一个规则,设置一列中文的自定义排序规则,文件如下:
/** * 第一列按照自定义规则进行排序 */jQuery.extend(jQuery.fn.dataTableExt.oSort, { "html-percent-pre": function (a) { var x = String(a).replace(/<[\s\S]*?>/g, ""); //去除html标记 x = x.replace(/ /ig, ""); //去除空格 x = x.replace(/%/, ""); //去除百分号 return parseFloat(x); }, "html-percent-asc": function (a, b) { //正序排序引用方法 return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "html-percent-desc": function (a, b) { //倒序排序引用方法 return ((a < b) ? 1 : ((a > b) ? -1 : 0)); }});
第二步放到datatables里面,设置第一列的排序规则,如下:
"aoColumnDefs": [ { "sType": "html-percent", "aTargets": [0] }, //指定列号使用自定义排序 ],
这样就神奇的好了,我觉得是否是因为json传到页面乱序了,设置了一个规则之后, 原来的数据就变得有序了,这只是猜测,希望有人能解答一下。
参考如下博文:http://www.tuicool.com/articles/jAbYRbJ
最近在项目中用到了 jQuery.dataTables, 这是一个很强大的 jQuery 插件,调用方便,支持回调对数据进行排序、查询、分页等操作,并且 bootstrap 框架也有对其封装,省了我们界面设计的活。dataTables 自带了string,date,numeric 的排序,但当遇到比较特殊的排序需求时,就得另寻出路了。
一个统计表格中的有几列的单元格是百分数,而且还带有 html 的标签。需要针对这几列的百分数排序。
单元格中的 html 代码是这样的。
<span class="label label-important"><i class="icon-caret-up"></i> 100.0%</span>
表格大概是长这样的。
而 dataTables 的自带排序会将这一列视为 string 排序。 显然是不满足我们需求的。一开始以为要大动干戈,后来看了API文档后发现,dataTables 的第三方扩展支持还是很灵活的。官方文档中提供了两种方法: (1) Type based column sorting ; (2) Custom data source sorting
。我使用的是第一种方法。主要思路就是将单元格内容转成可排序的 float 类型。
首先创建一个文件叫
dataTables.sort.plungin.js
,加入以下代码。jQuery.extend(jQuery.fn.dataTableExt.oSort, { "html-percent-pre": function (a) { var x = String(a).replace(/<[\s\S]*?>/g, ""); //去除html标记 x = x.replace(/ /ig, ""); //去除空格 x = x.replace(/%/, ""); //去除百分号 return parseFloat(x); }, "html-percent-asc": function (a, b) { //正序排序引用方法 return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "html-percent-desc": function (a, b) { //倒序排序引用方法 return ((a < b) ? 1 : ((a > b) ? -1 : 0)); }});
在前台页面中加入以下的 js 引用。
<script type="text/javascript" src="jquery.dataTables.js"></script><script type="text/javascript" src="dataTables.numericComma.js"></script> <script type="text/javascript"> var oTable1 = $('#table_report').dataTable({ "aoColumnDefs": [ { "sType": "html-percent", "aTargets": [8] }, //指定列号使用自定义排序 ], "bLengthChange": true, //开关,是否显示每页大小的下拉框 "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]], 'iDisplayLength': 25, //每页显示10条记录 'bFilter': true, //是否使用内置的过滤功能 "bInfo": true, //开关,是否显示表格的一些信息 "bPaginate": true //开关,是否显示分页器 }); });</script>
完成。
参考资料
- DataTables关于排序的文档
- 另一种自定义方法
-EOF-
0 0
- jQuery.dataTables 中文乱序 (后台是有序) 自定义排序
- jQuery datatables中文排序
- 【转】jQuery.dataTables 自定义排序
- java url是中文,后台出现乱
- JQuery DataTables 列自定义数据类型排序
- jquery.dataTables中文初始化
- jquery DataTables中文使用说明
- jquery DataTables中文使用说明
- Hibernate中文排序乱序问题
- JQuery DataTables插件中文文档
- 【转帖】jquery DataTables中文使用说明
- Jquery DataTables 自定义布局sdom
- jquery datatables自定义返回结果
- JQuery DataTables 自定义按钮实现
- JQuery DataTables 服务端自定义查询(最新版本介绍)
- Jquery DataTables 基本设置的中文注解
- 将jquery的datatables插件转为中文
- JQuery dataTables插件中文无法转换问题
- CArray和CMap使用
- iOS实战开发常见问题(一)
- SQL lpad()函数
- Wpf Border圆角
- Python---pandas包
- jQuery.dataTables 中文乱序 (后台是有序) 自定义排序
- 小波变换
- 第9周项目2-(1)对称矩阵压缩存储的实现与应用
- IntelliJ IDEA---常用设置讲解(gif版)
- easyui filebox限制文件上传的类型
- eclipses svn 报错 403forbidden
- 【Swing基础】setPreferredSize和setSize的区别及用法
- 用代码证明自己闲的蛋疼(二)——写暴力去做逻辑推理题
- 第十二周项目4-利用遍历思想求解图问题1