Method for jQuery plug in dataTables to add sequence number column

  • 2021-07-01 06:36:50
  • OfStack

Official website method example:


$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [[1, 'asc']]
});
t.on('order.dt search.dt',
function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});

Try 1, and then found that the draw method can not be found, may be due to version problems, using version 1.12. 10.

Therefore, it is ok to find that there are enthusiastic netizens sharing 1 method.

Define {"data": null, "targets": 0}, 1 empty column, and then add the method in dataTables:


"fnDrawCallback": function(){
    var api = this.api();
    var startIndex= api.context[0]._iDisplayStart;// Get the number of articles to the beginning of this page 
    api.column(0).nodes().each(function(cell, i) {
          cell.innerHTML = startIndex + i + 1;
    }); 
}

Website link: http://datatables.club/example/api/counter_columns. html


Related articles: