JQuery Data Tableシーケンス番号列の表示
1704 ワード
プロジェクトのニーズに応じて、DataTable表示シーケンス番号を検索する方法はいくつかあります.
1.フロントエンドページング.
まず、このシーケンス番号列を空の列に設定します.
DataTable設定パラメータが完了したら、次のコードを追加します.
この方法はフロントエンドのページングの問題を効果的に解決することができる.
2.バックグラウンドページング
メソッド1:このシーケンス番号列を空の列に設定します.
dataTableのパラメータ設定に次の設定を加えます.
この方法では、バックグラウンドでページを分割する問題を解決できますが、シーケンス番号列の幅が小さいと、ページをめくるときにページが点滅する問題が発生する可能性があります.
メソッド2:シーケンス番号列を設定するときに表示されます.コードは次のとおりです.
この方法は、ページをめくるときに再描画することによる点滅の問題を回避しながら、ページ番号の表示を効果的に解決します.
以上です.問題があったら私に連絡してくださいよ、共に成長して、共に進歩します!
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;
}}, //
この方法は、ページをめくるときに再描画することによる点滅の問題を回避しながら、ページ番号の表示を効果的に解決します.
以上です.問題があったら私に連絡してくださいよ、共に成長して、共に進歩します!