文档章节

dataTables中文排序以及中英文混排乱序问题解决

Simon_ITer
 Simon_ITer
发布于 2016/12/15 18:41
字数 535
阅读 710
收藏 23

dataTables是个强大的JQuery表格插件,但是不支持中文排序,这个比较令人头疼。

这里针对几种常见的数据格式写了一个dataTables的中文排序方法:

//添加中文排序
function addChieseAsc() {
    jQuery.fn.dataTableExt.oSort['chinese-asc'] = function(x, y) {
        x = (x instanceof Array) ? x[0] : x == '-' ? 'z' : x; //z的ASCII码值最大
        y = (y instanceof Array) ? y[0] : y == '-' ? 'z' : y;
        //javascript自带的中文比较函数,具体用法可自行查阅了解
        return x.localeCompare(y);
    };

    jQuery.fn.dataTableExt.oSort['chinese-desc'] = function(x, y) {
        x = (x instanceof Array) ? x[0] : x == '-' ? 'z' : x;
        y = (y instanceof Array) ? y[0] : y == '-' ? 'z' : 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;
    });
}

注:

  • x,y可能是数组也可能是字符串,若是数组则x[0]即可获取数据
  • x,y若不是数组,则需要判断字符串的具体类型,有可能是"“、null等,这里我将这种类型的数据过滤成'-‘了(方法在下面会给出),所以这里判断是否是’-‘,如果是,在判断的时候视其为最大,这里用'Z'来代替
  • 该方法需要在onReady之前引入。

这样还有一个问题就是:这里的方法只会识别中文,所以如果有的列是空字符串或者null和中文在一列的时候等是进入不了不了这个方法的,那么我们就需要手动将这一列设置为中文,跳转验证这一步。

设置方法为:

在dataTables初始化的时候传入type:

$('#table').DataTable({
    columns: [{
        title: "test",
        type: 'chinese',//这里强制转换类型
        data: "fieldsName",
        render: function(data) {
            return formatTableData(data)
        }
    }],
});
function formatTableData(data) {
    switch (data) {
        case null:
        case "false":
        case "":
            return '-';
            break;
        case true:
            return '是';
            break;
        case false:
            return '否';
            break;
        default:
            return data;
            break;
    }
}

这样就大功告成了,dataTables可以对中文进行排序了,希望对大家有帮助~

© 著作权归作者所有

Simon_ITer
粉丝 73
博文 41
码字总数 27876
作品 0
上海
前端工程师
私信 提问
Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

一、问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做。 后端的分页接口已经写好了,不能修改。接口需要传入页码(pageNumber)和页面显示数据条数(pageSi...

OSC首席混子
04/23
8
0
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0
jQuery-ui DataTable 列排序可以定制吗?

jQueyr-ui 的插件 DataTables很好用。但在排序时,只能根据内容进行排序。 我有一列数据是“星期几”,用的是中文:“周一”,“周二”,“周三”。 结果排序时是按字母排序的。。。用户不满...

庄严zhuangyan
2012/02/11
8.4K
3
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
2.7K
1

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
41
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部