How to insert serial number in jquery datatable using jquery?

Question

< script type = "text/javascript" >
  $(function() {
    var oAllLinksTable = $("#mydatatable").dataTable({
      "bProcessing": false,
      "bServerSide": true,
      "sAjaxSource": "/myreports/data?Id=" + id,
      "sPaginationType": "full_numbers",
      "bDestroy": true
    });
  }); 
< /script>

My table as follows

 <table id="headertagstable" style="width: 100%;" class="grid-table04 margin-b-20">
  <thead>
    <tr>
      <th width="10%" align="left" valign="middle">
        SI No
      </th>
      <th width="40%" align="left" class="black-link-first" valign="middle">
        Name
      </th>
      <th width="25%" align="left" valign="middle">
        Date
      </th>
      <th width="25%" align="left" valign="middle">
        Place
      </th>
    </tr>
  </thead>
</table>

All works fine except serial number. How can I add serial number using jquery ?

rather than inserting more code provide description along with code to understand the problem — Hemant Metalia
– Hemant Metalia, Commented Feb 6, 2012 at 5:43
in my how can i insert serial number using jquery i try to implement "aoColumnDefs": [{"bSortable": true, "bSearchable": true, "fnRender": function (oObj) {//here how can i generate serial number? and use return the serial number }"aTargets": [0] } — Sreenath Plakkat
– Sreenath Plakkat, Commented Feb 6, 2012 at 5:47

Community · Accepted Answer · 2017-05-23 12:01:58Z

25

you can try following

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
                $("td:first", nRow).html(iDisplayIndex +1);
               return nRow;
            },

refer http://datatables.net/forums/discussion/2169/adding-and-deleting-rows-with-row-numbers/p1

another solution i just found on stackoverflow itself is as follow:

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

refer Add row number column to jquery datatables

Updated : Just tweak the fnRowCallback function to get serial numbers correctly with paginations

    "fnRowCallback" : function(nRow, aData, iDisplayIndex){      
                          var oSettings = oAllLinksTable.fnSettings();
                           $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                           return nRow;
                },

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Feb 6, 2012 at 5:51

Hemant Metalia

30.8k18 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sreenath Plakkat Over a year ago

hi hemanth by using this the serial no always starts with 1 in case next 10 values are selected .i need to show next 10 as 11 to 20

Balasubramanian Ramamoorthi Over a year ago

does not export serialno column rendered with rowcallback function.

Al Mubassir Muin · Accepted Answer · 2019-07-08 14:10:53Z

10

just add the following code

"columns": [
        {
        "title": "Serial",
        render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
        }
        }
       ],

edited Jul 8, 2019 at 14:10

answered Jul 8, 2019 at 14:04

Al Mubassir Muin

4785 silver badges7 bronze badges

2 Comments

Faizan Over a year ago

The code has an issue with pagination. When exporting with CSV from the next page, it gives all rows, but the starting SR NO is not 1; it is the value of SR NO on that page. The code seems buggy.

Kamlesh Feb 12 at 12:54

Awesome solution dear, worked well with search and pagination in DataTable 2.x version, thanks :)

Anandhukrishna VR · Accepted Answer · 2019-04-24 03:56:27Z

9

Here is the simple answer. Use datatable render method.

Example :

var i = 1;

$("#myTable1").dataTable().fnDestroy();


$('#myTable1').DataTable({

  ajax: base_url + 'specific_function',

  columns: [

    {
      "render": function(data, type, full, meta) {
        return i++;
      }
    },
    {
      "data": "col_2_data"
    },
    {
      "data": "col_3_data"
    },
    {
      "render": function(data, type, full, meta) {
        return '<button class="btn btn-success btn-sm" onclick="editBUT(' + full.id + ')">EDIT</button>';
      }
    }
  ]
});

edited Apr 24, 2019 at 3:56

answered Feb 28, 2019 at 8:53

Anandhukrishna VR

2792 silver badges17 bronze badges

2 Comments

Anandhukrishna VR Over a year ago

Done .Thank you

Kamlesh Feb 12 at 12:53

Not worked for me, when we use pagination from 1 to 2 or 2 to 1, it always increase the showing record's serial number. This is not correct solution. Generating another issue.

Urja Satodiya · Accepted Answer · 2018-07-09 12:48:18Z

7

I have solved using following code. The code works fine for me.

"rowCallback": function (nRow, aData, iDisplayIndex) {
     var oSettings = this.fnSettings ();
     $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
     return nRow;
},

Use this.fnSettings (); instead of oAllLinksTable.fnSettings(); will solve the issue.

refer https://datatables.net/forums/discussion/5316/strange-behavior-of-fnsettings

answered Jul 9, 2018 at 12:48

Urja Satodiya

4125 silver badges11 bronze badges

1 Comment

Shurvir Mori Over a year ago

This works with pagination... Thankx bro... but while you click sort ascending or descending, its not changing like 10,9,8,7,....

20B2 · Accepted Answer · 2018-06-13 06:23:56Z

4

I've solved using the following code. The code works fine with pagination.

    var dt = $('#table-id').DataTable({
         ...,
         "createdRow": function (row, data, index) {
              var info = dt.page.info();
              $('td', row).eq(0).html(index + 1 + info.page * info.length);
          },
    });

edited Jun 13, 2018 at 6:23

answered Nov 27, 2017 at 16:59

20B2

2,15120 silver badges30 bronze badges

Comments

MaNik · Accepted Answer · 2012-08-25 10:25:33Z

3

Just tweak the fnRowCallback function to get serial numbers correctly with paginations

    "fnRowCallback" : function(nRow, aData, iDisplayIndex){      
                          var oSettings = oAllLinksTable.fnSettings();
                           $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                           return nRow;
                },

answered Aug 25, 2012 at 10:25

MaNik

1216 bronze badges

Comments

Chintan Dhameliya · Accepted Answer · 2021-04-26 06:06:03Z

3

$('#users').DataTable({
    processing: true,
    serverSide: true,
    ajax: "",
    columns: [{
          data: id,
          render: function (data, type, row, meta) {
               return meta.row + meta.settings._iDisplayStart + 1;
          }
    }]
});

edited Apr 26, 2021 at 6:06

answered Apr 26, 2021 at 5:59

Chintan Dhameliya

312 bronze badges

1 Comment

Ali A. Jalil Over a year ago

render used with columnDefs not with columns

Harsh Patel · Accepted Answer · 2021-01-05 06:10:38Z

1

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)
     ]

answered Jan 5, 2021 at 6:10

Harsh Patel

1,43414 silver badges27 bronze badges

Comments

codegutsy · Accepted Answer · 2020-03-27 19:13:54Z

0

The continuation of serial number breaks when next pagination is clicked, using iDisplayIndex the following code:

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
      $("td:first", nRow).html(iDisplayIndex +1);
      return nRow;
 },

instead you can use aData for displaying continuation of serial number:

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
      $("td:first", nRow).html(aData.DT_RowIndex);
      return nRow;
}

answered Mar 27, 2020 at 19:13

codegutsy

4714 bronze badges

Comments

The EasyLearn Academy · Accepted Answer · 2020-03-30 01:52:32Z

0

"fnDrawCallback": function(oSettings) {
      var count=0;
      $('#myTable').find('tr').each(function() {
        $(this).find('td').eq(0).before('<td>' + count + '</td>');
        count++;
      });
    }

answered Mar 30, 2020 at 1:52

The EasyLearn Academy

93513 silver badges23 bronze badges

1 Comment

Suraj Kumar Over a year ago

Code-only answers may solve the problem but they are much more useful if you explain how they solve it. Community requires theory as well as code both to understand your answer fully.

Araf Hossain · Accepted Answer · 2020-03-31 20:53:50Z

0

Here is an another new solution which works with Datatable 1.10.

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

answered Mar 31, 2020 at 20:53

Araf Hossain

6111 bronze badges

Collectives™ on Stack Overflow

How to insert serial number in jquery datatable using jquery?

11 Answers 11

2 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related