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:

Anyone knows how to do this?

Answers


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;

Just write a render function:

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

As I commented, both @Pehmolelu and @Tao Wang's answer was not working well for me. I had to go with what the DataTables's Index Column advises: https://datatables.net/examples/api/counter_columns.html

Note that in case of me even the column configuration is coming down through an API call of my webapp server (and sometimes I have row counters, sometimes don't), there are 3 system column 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.


Need Your Help

Module has not attrbiute many2one - Odoo v9 community

python openerp odoo-9

I'm adding a field to a model froma custom module in Odoov9 Community edition.