jQuery + Datatables-aoColumnDefs指定列的自定义排序规则

在使用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(/&amp;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这个自定义方法排序
结果如下
在这里插入图片描述
在实际开发中根据自己的数据需要进行自定义改造。

发布了12 篇原创文章 · 获赞 22 · 访问量 3251

猜你喜欢

转载自blog.csdn.net/bosslay/article/details/105606996
今日推荐