JQuery DataTable 序號列的顯示

因項目需求,查詢出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;
}}, // 序號

此方法能有效解決分頁的序號顯示,同時避免了在翻頁時重繪可能帶來的閃爍問題。


以上。有問題請聯繫我喲,共同成長,共同進步!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章