Add row number column in jquery datatables

Question

I want jQuery datatables to automatically create a row number column in the first column, such as a datagrid in VB.

It looks like this:

Does anyone know how to do this?

Answer 1

You simply define an empty column in aoColumns columns.

Then in the fnRowCallback function, you simply edit the column as you like. This callback is triggered every time a new line is created.

Basically, if your first column has a row number, you can simply do this in fnRowCallback:

var index = iDisplayIndex +1; $('td:eq(0)',nRow).html(index); return nRow; 

Answer 2

Just write a render function:

 { "data": "id", render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } } 

Answer 3

As I said, both answers @Pehmolelu and @Tao Wang did not work well for me. I had to go with what the DataTables index column recommends: https://datatables.net/examples/api/counter_columns.html

Please note that in the case of me, even the configuration of the column goes down through a call to my webapp server API (and sometimes I have row counts, sometimes not), there are 3 system columns in front of this counter column, the column index is 3, but you need to configure it in according to your needs.

 t.on('order.dt search.dt', function () { t.column(3, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { cell.innerHTML = i+1; }); }).draw(); 

In addition, if your solution is not as complicated as my link above, also shows how to add this column to unsortable + unsearchable (again you need to configure the column index for your needs):

 var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 3 }], "order": [[4, 'asc']] }); 

There is also a plugin that you can use instead of your own code.