datatables对于某一特定的列进行自定义排序

Posted 2020-10-11 sweeeper

首先说下里边的api，其中第一个是order,这个里边是设置哪些排序哪些不排序的，比如：$(‘#example‘).dataTable( {

    "order": （function(){

 　　　　　　　　var arr=[[ 0, ‘asc‘ ], [ 1, ‘asc‘ ]];

　　　　　　　　　return arr;

　　　　　　　　  }）();//匿名函数里的自运行不影响其他外部的变量

} );

第二个是columnDefs，这个是对某一列的规则进行处理，举个例子：

比如我封装的一个组件，里边传入哪些列是要自定义排序的，那么可以写成：

columnDefs:(function(){

var arry=[],i=0;

if (ipAddress && ipAddress .length>0) {

arry.push({

type:‘ip-address‘,//这个是自定义的名字

targets:ipAddress,//这个是要自定义排序列索引的数组

})

}

return arry;

})(),

 

 

举个小例子：https://datatables.net/examples/plug-ins/sorting_manual

$.fn.dataTable.ext.type.order[‘salary-grade-pre‘] = function ( d ) {

    switch ( d ) {

        case ‘Low‘:    return 1;

        case ‘Medium‘: return 2;

        case ‘High‘:   return 3;

    }

    return 0;

};

 

$(document).ready(function() {

    $(‘#example‘).DataTable( {

        "columnDefs": [ {

            "type": "salary-grade",

            "targets": -1

        } ]

    } );

} );

 

经过检索有位网友也遇到了相同的问题，写的很好，限制贴出来如下。可以作为参考：

原文http://wuchong.me/blog/2014/02/25/jquery-datatable-sort-plugin/?utm_source=tuicool&utm_medium=referral

 

最近在项目中用到了 jQuery.dataTables， 这是一个很强大的 jQuery 插件，调用方便，支持回调对数据进行排序、查询、分页等操作，并且 bootstrap 框架也有对其封装，省了我们界面设计的活。dataTables 自带了string，date，numeric 的排序，但当遇到比较特殊的排序需求时，就得另寻出路了。

这几天正好碰到了这么个需求，一个统计表格中的有几列的单元格是百分数，而且还带有 html 的标签。需要针对这几列的百分数排序。

单元格中的 html 代码是这样的。

<span class="label label-important"> <i class="icon-caret-up"></i>&amp;nbsp;&amp;nbsp;100.0%</span>

表格大概是长这样的。

而 dataTables 的自带排序会将这一列视为 string 排序。 显然是不满足我们需求的。一开始以为要大动干戈，后来看了API文档后发现，dataTables 的第三方扩展支持还是很灵活的。官方文档中提供了两种方法： (1) Type based column sorting ; (2) Custom data source sorting
。我使用的是第一种方法。主要思路就是将单元格内容转成可排序的 float 类型。

1. 首先创建一个文件叫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(/&amp;nbsp;/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)); } });

2. 在前台页面中加入以下的 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>

3. 完成。

参考资料

• DataTables关于排序的文档
• 另一种自定义方法

我所遇到的项目结构是：

需要说明的是，我所命名的一个排序规则为：ip-address，改动datatables的构造函数里边相关的API为：

order:(function(){//这个是初始化哪些表格要排序，以及按照递增还是递减排序

var arry=[];

if(ipaddress && ipaddress.length>0){

for(var i=0;i<ipaddress.length;i++){

arry.push([ipaddress[i],‘asc‘]);

}

return array;

})(),

columnDefs:(function(){

var arry=[],i=0;

if (ipAddress && ipAddress .length>0) {

arry.push({

type:‘ip-address‘,//这个是自定义的名字

targets:ipAddress,//这个是要自定义排序列索引的数组

})

}

return arry;

})(),

 

接下来说说那个自定义的js文件（要先于这个表格构造之前加载）。

编写对应的js文件我命名为ip-address-sort.js

 

里边的内容为：

 

jQuery.extend(jQuery.fn.dataTableEXT.oSort,{

  "ip-address-pre":function(a){//这个a是点击对应的列传入td里边的内容，pre算是对数据的预处理,这个在比较数据之前调用

　　　。。。//省略数据处理的过程

　　　return x;//这个就是最后要返回每个列表中经过处理后的单个数据，不是数组哈，只是一个值

}，

“ip-address-asc”:function(a,b){//点击列表中递增排序的时候调用

　　return ((a<b)? -1 : ((a> b) ? 1 : 0));//比较大小

},

“ip-address-desc”:function(a,b){//点击列表递减排序时候调用

　　return ((a<b)? -1 : ((a> b) ? 1 : 0));

}

});