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