JQuery DataTable 序号列的显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/diypp2012/article/details/64124796

因项目需求，查询出DataTable显示序号的几种方式：

1.前端分页。

首先设置该序号列为空列，即

{"data": null, 
"targets": 0 } //表示：第一列的值暂时设为null。

在dataTable设置参数完成后，增加以下代码：

/* 设置第一列 - 序列化 */
ResultTable.on('order.dt search.dt', function() {
	grpResultTable.column(0, {
	search: 'applied',
	order: 'applied'
}).nodes().each(function(cell, i) {
	cell.innerHTML = i + 1;
	});
}).draw(); 

//ResultTable为dataTable设置的返回值。即 var ResultTable = $("#groupTable").dataTable({...}).api();

该方法能有效的解决前端分页的问题。

2. 后台分页

方法1：同样设置该序号列为空列。

在dataTable的参数设置中加入以下设置：

drawCallback : function() { // 序号列
	var api = this.api();
	var startIndex = api.context[0]._iDisplayStart; // 获取本页开始的条数
	api.column(0).nodes().each(function(cell, i) {
		cell.innerHTML = startIndex + i + 1;
	});
}

此方法可以解决后台分页的问题，但是，当序号列所占据的宽度较小时，可能带来翻页时页面闪烁的问题。

方法2：在设置序号列时，进行显示，代码如下：

{"data" : null,
"render" : function(data, type, full, meta){
return meta.row + 1 + meta.settings._iDisplayStart;
}}, // 序号

此方法能有效解决分页的序号显示，同时避免了在翻页时重绘可能带来的闪烁问题。

以上。有问题请联系我哟，共同成长，共同进步!