CODEWITHSUNDEEP
jqueryhtmldatatables
Xinez
Xinez

Reputation: 341

Add row number column to jquery datatables

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?

Upvotes: 21

Views: 86206

Answers (5)

Csaba Toth
Csaba Toth

Reputation: 10729

As I commented, neither @Pehmolelu (each consecutive page started from 1) nor @Tao Wang's (when I sorted by a column the order numebrs got mangled) answer was working for me. I had to go with what the DataTables's Index Column advice was: https://datatables.net/examples/api/counter_columns.html

Note that in my case the column configuration was coming down through an API call of my webapp server (and sometimes I have row counters, sometimes don't), there were 3 system columns before this counter column, hence the column index is 3, but you need to adjust it to fit 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();

Also, if your solution is not as complex as mine the link above also shows how you add that column in an unsortable + unsearchable way (again you need to adjust the column index to your needs):

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

There's also a plugin you may want to utilize instead of your own code.

Upvotes: 4

Wim den Herder
Wim den Herder

Reputation: 1305

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);
    }
});

Upvotes: 4

Araf Hossain
Araf Hossain

Reputation: 61

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;
        } );
    } );
} );

Upvotes: 1

Tao Wang
Tao Wang

Reputation: 869

Just write a render function:

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

Upvotes: 76

Pehmolelu
Pehmolelu

Reputation: 3564

You just define an empty column in aoColumns.

Then in fnRowCallback function you just edit the column how you like. This callback is run every time new row is created.

Basicly if your first column has the row number, you could just do this in fnRowCallback:

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

Upvotes: 11

Related Questions