How to add row number to table written by jQuery DataTable using server side data source

Question

I use jQuery DataTable to bind and display my data. However, I cannot add the line number to the generated grid from the client side. Here is my code:

HTML

<table id="applications_list" class="table table-bordered datagrid"> <thead> <tr> <th><?php echo __('No.'); ?></th> <th><?php echo __('Application Code'); ?></th> <th><?php echo __('Application Name'); ?></th> <th><?php echo __('Created By'); ?></th> <th><?php echo __('Created Date'); ?></th> <th><?php echo __('Action'); ?></th> </tr> </thead> <tbody> </tbody> </table> 

Javascript

 $('#applications_list').dataTable({ "bLengthChange": false, "bFilter": true, "bFilter": false, "bProcessing": true, "bServerSide": true, "sPaginationType": "full_numbers", "sAjaxSource": config.siteURL + "/applications/ajax_index", "sServerMethod": "POST", "aoColumns": [ { "mData": null, "bSortable": false }, { "mData": "app_applicationcode", "sName": "app_applicationcode" }, { "mData": "app_applicationname", "sName": "app_applicationname" }, { "mData": "app_createdby", "sName": "app_createdby" }, { "mData": "app_createddate", "sName": "app_createddate" }, { "mData": "app_applicationcode", "bSortable": false, "mRender": function(data) { return '<a href="' + config.siteURL + '/applications/delete/' + data + '" class="confirm_delete"><i class="">x</i></a>' }}, ], "aaSorting": [[ 0, 'asc' ]], }); 

I read the documentation here , but this will not work. Can someone help me solve this problem?

Answer 1

For DataTables 1.10.4,

 "fnCreatedRow": function (row, data, index) { $('td', row).eq(0).html(index + 1); } 

Answer 2

Since none of the solutions worked here, here is my solution for the server side.

• add an additional table <th></th> to the table to mark where the number should be inserted.

• add the following after the start of the table, just as you would add "ajax": {"url":"somepage"},

  "fnCreatedRow": function (row, data, index) {var info = table.page.info (); var value = index + 1 + info.start; $ ('td', row) .eq (0) .html (value); },

3. In the place where the variables are defined for the columns of the table, add this column {"data": null, "sortable": false}, so it looks like this:

 "columns": [ { "data": null,"sortable": false }, ......] 

4. To get rid of the sort icon (up arrow), select the second column by adding "order": [[ 1, 'asc' ]] , just as you would add "ajax" ....

Answer 3

Add the following code to "fnRowCallback":

For Datatables 1.10

 "fnRowCallback": function (nRow, aData, iDisplayIndex) { var info = $(this).DataTable().page.info(); $("td:nth-child(1)", nRow).html(info.start + iDisplayIndex + 1); return nRow; } 

Answer 4

This is possible using the fnPagingInfo api in rowCallback to get the page and display length and use it to calculate the line number as follows:

For DataTables <1.10

 $('#example').dataTable({ "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { var page = this.fnPagingInfo().iPage; var length = this.fnPagingInfo().iLength; var index = = (page * length + (iDisplayIndex +1)); $('td:eq(0)', nRow).html(index); } }); 

For DataTables == 1.10

 $('#example').dataTable({ "rowCallback": function( row, data, iDisplayIndex ) { var info = this.api.page.info(); var page = info.page; var length = info.length; var index = = (page * length + (iDisplayIndex +1)); $('td:eq(0)', row).html(index); } }); 

NOTE: for DataTables <1.10, you must add fnPageInfo.js script to your page

Answer 5

The official solution from DataTable :

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

Answer 6

The manual from the official documentation did not work on the side tables of the server. The best answer I can get is this answer (from another question), just to write a rendering function:

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

Go to this answer.

Answer 7

The best solution:

 "columns": [ { "data": null,"sortable": false, render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } }, 

......]

Answer 8

Assuming <?php echo __('No.'); ?> <?php echo __('No.'); ?> is the main key from the database, you can use columnDefs to add the key as a row number to every cell in a row like this

 "columnDefs": [{ "targets": '_all', "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) { $(cell).attr({'data-pk': rowData[0]}); } }] 

Where rowData[0] is the value of the primary key.