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?
-
how are you loading datatables? show some codecodeandcloud– codeandcloud2011-07-29 09:51:50 +00:00Commented Jul 29, 2011 at 9:51
-
What you need, is just to count the result(either in json or array) then itterate it to generate a sequenced number and build it along side with other result data.toopay– toopay2011-07-29 09:59:26 +00:00Commented Jul 29, 2011 at 9:59
Add a comment
|
5 Answers
Just write a render function:
{
"data": "id",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
}
2 Comments
fbarikzehy
That's it.Nice & Clean (;
Csaba Toth
This sounded like the nicest solution, but as soon as I sort by a column the numbers get mangled
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;
5 Comments
Xinez
thx, i have tried it and it was a success :D now, how do i can make the first coloumn not sortable??
Xinez
oh yeah, it seems the method was success but when i change page number in datables, the row number is still from 1, how to make it continous number till the last page??
Pehmolelu
Oh, so then you want to use the: iDisplayIndexFull :)
Csaba Toth
When I applied this, every page started from 1.
Pehmolelu
@CsabToth Read the comment before yours
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);
}
});
Comments
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.
2 Comments
Julius
Can you provide a sample on live.datatables.net ?
Csaba Toth
@Julius Not at the moment
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;
} );
} );
} );