jquery - 如何使用jquery在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>

我的表格如下

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

除了序列号之外，一切正常。如何使用 jquery 添加序列号？

Answer 1

您可以尝试以下操作

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

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

我刚刚在 stackoverflow 上找到的另一个解决方案如下:

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

引用Add row number column to jquery datatables

更新:只需调整 fnRowCallback 函数即可通过分页正确获取序列号

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