Add row number column to jquery datatables

user_869087 0
Viewed 68635

I want jQuery datatables to automatically create row number column in the first column like datagrid in VB.

It looks like this:

enter image description here

Anyone knows how to do this?

datatables html jquery
5 Answers

fnRowCallback in the config. Use iDisplayIndexFull instead of iDisplayIndex. Otherwise it shows the row of the displayed tabled (without paging)

$('#myTable').DataTable({
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        $('td:eq(0)', nRow).html(iDisplayIndexFull +1);
    }
});
user_45972460

Here is an another new solution which works with Datatable 1.10.

It has worked for me through sorts, searches, and page length changes. Here is my solution:

Briefly discussed in here: https://datatables.net/examples/api/counter_columns.html

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

user_86578410
Related