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 ?

Answer 1

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

Answer 2

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

Answer 3

just add the following code

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