CODEWITHSUNDEEP
javascriptjquerydatatable
Habibillah
Habibillah

Reputation: 28715

How to add row number on table genareted by JQuery DataTable with server side datasource

I use JQuery DataTable to bind and show my data. However, I can't add row number to generated grid from client side. Here 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 documentation here, but it won't work. Can anyone help me to solve this problem?

Upvotes: 10

Views: 35389

Answers (10)

Admsoft
Admsoft

Reputation: 1

Just add return meta.row + 1 this inside render function. For Example.

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

Upvotes: 0

Harsh Patel
Harsh Patel

Reputation: 1344

when we use Server Side Rendering, One of the Easy & Best Way for Display Auto Increment Sr No. instead of table row id... I used "Laravel Yajra DataTable"

simply use return meta.row + 1; .

see Below Example Code

columns: [
    {data: 'SrNo',
       render: function (data, type, row, meta) {
            return meta.row + 1;
       }
    },
    .... //your Code(Other Columns)
 ]

Or You can also Use like this

columns: [
        {data: 'SrNo',
           render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
           }
        },
        .... //your Code(Other Columns)
     ]

Upvotes: 1

kubura
kubura

Reputation: 151

Best solution:

"columns": [

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

Upvotes: 15

pavankguduru
pavankguduru

Reputation: 325

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

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

Where rowData[0] will be the primary key value.

Upvotes: 1

Vishal S. Pawar
Vishal S. Pawar

Reputation: 71

Add following code in "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;
 }

Upvotes: 6

Ifan Iqbal
Ifan Iqbal

Reputation: 3093

The guide from official documentation didn't work on server side tables. The best answer I can get is from this answer (from another question), just to write a render function:

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

Go upvote that answer.

Upvotes: 4

3xCh1_23
3xCh1_23

Reputation: 1499

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

  1. add the extra <th></th> in your table, this is to mark where the number is to be inserted.

  2. add the following right after initiating the table, the same way 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.At the location where the variables are defined for the table columns, add this column { "data": null,"sortable": false }, so it looks like this:

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

4. To get rid of the sorting icon (up-down arrow), select the second column by adding , "order": [[ 1, 'asc' ]], the same way you would add "ajax"....

Upvotes: 2

Bian Jiaping
Bian Jiaping

Reputation: 966

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

Upvotes: 1

Abhishek Singh
Abhishek Singh

Reputation: 111

For DataTables 1.10.4,

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

Upvotes: 6

Jelil Adesina
Jelil Adesina

Reputation: 287

This is possible by make use of fnPagingInfo api in the rowCallback to get the page and the display length and use it to calculate the row number like this:

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 have to add the fnPageInfo.js script to your page

Upvotes: 1

Related Questions