在使用datatables中有时某些列的数据会比较复杂,根据默认的desc/asc的排序已经无法满足需求,查阅了相关文章,发现可以使用自定义datables的aoColumnDefs 的排序方法这种途径来实现自定义指定列排序。
参考:https://www.cnblogs.com/sweeeper/p/7700812.html
未排序前数据如下
第一列数据行业排名的格式为
8888
888中文
这样,目的是指定第一个p标签内的内容进行排序,我的项目中datatables的初始化是封装在utils的initDataTables中,在初始化的方法加入如下代码 ($ =jquery ; shit-sort-pre这种自定义名称根据自己随便写,我是被datatables磨掉了耐心,so be it。function里的处理方法根据自己的数据格式自行改造,我理解 pre 就是这个方法的默认排序,desc/asc 你懂的)$.extend($.fn.dataTableExt.oSort, {
//撰写自定义排序规则
"shit-sort-pre": function(a) {
var x = String(a).replace(/<[\s\S]*?>/g, ""); //去除html标记
x = x.replace(/&nbsp;/ig, ""); //去除空格
x = x.replace(/%/, ""); //去除百分号
return parseFloat(x);
},
"shit-sort-asc": function(a, b) { //正序排序引用方法
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"shit-sort-desc": function(a, b) { //倒序排序引用方法
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
在页面的js中初始化表格,向initDataTables方法传入一些需要自定义的配置,此处为自定义排序列,customeSort 数组包裹对象 sType:需要使用的排序方法名称;aTargets:要对哪一列按照此方法排序(0 -infiity)
table = utils.initDataTables(null, '甲标题' + '│' +
titleInfo.dateRange.replace('|', '至') + '│' +
titleInfo.device + titleInfo.sellerType, {
customeSort: [{
"sType": "shit-sort",
"aTargets": [1]
}, //指定列号使用自定义排序
],
}
);
在initDataTables 会有判断 aoColumnDefs
"aoColumnDefs": obj != undefined ? obj.customeSort != undefined ? obj.customeSort : [] : [],
"order": obj != undefined ? obj.defaultOrder != undefined ? obj.defaultOrder : [] : [],
ordering: obj != undefined ? obj.ordering != undefined ? obj.ordering : true : true,
流程就是 对第1列的数据进行按照shit-sort这个自定义方法排序
结果如下
在实际开发中根据自己的数据需要进行自定义改造。