如何使用服务器端数据源在JQueryDataTable提供的表Gen上添加行号

最佳解决方案：

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

对于数据表1.10.4，

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

在"fnRowCallback"中添加以下代码：

对于数据表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;
 }

官方文档中的指南在服务器端表上不起作用。我能得到的最好的答案是从这个答案（从另一个问题），只是写一个渲染函数：

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

投票支持这个答案。

由于这里的解决方案都不适合我，所以这里是我的服务器端解决方案。

1. 在表中添加额外的<th></th>，这是为了标记要插入的数字。

2. 在启动表格后立即添加以下内容，方法与添加"ajax": {"url":"somepage"}, 相同

   "fnCreatedRow"：函数（行、数据、索引）{var info=table.page.info（）；var值=index+1+info.start；$（'td'，row）.eq（0）.html（value）；}，

3.在为表列定义变量的位置，添加此列{"data"：null，"sortable"：false}，看起来是这样的：

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

4.要去掉排序图标（上下箭头），请通过添加"order": [[ 1, 'asc' ]]来选择第二列，方法与添加"ajax"相同。。。。

这可以通过使用rowCallback中的fnPagingInfoapi来获取页面和显示长度，并使用它来计算行号，如下所示：

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

对于数据表==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);
  }
});

注意：对于DataTables<1.10，您必须将fnPageInfo.js脚本添加到页面

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

当我们使用服务器端渲染时，Easy&显示自动递增序号而不是表行id的最佳方式…我使用了"；Laravel-Yajra数据表"

只需使用return meta.row+1。

参见以下示例代码

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

或者你也可以像这样使用

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

假设<?php echo __('No.'); ?>是数据库中的主键，则可以使用columnDefs将该键作为行号添加到像这样的行的每个单元格中

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

其中rowData[0]将是主键值。

只需在渲染函数中添加return meta.row + 1即可。例如

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