因項目需求,查詢出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;
}}, // 序號
此方法能有效解決分頁的序號顯示,同時避免了在翻頁時重繪可能帶來的閃爍問題。
以上。有問題請聯繫我喲,共同成長,共同進步!