将行号列添加到jquery数据表

Question

我希望jQuery数据表能够在第一列中自动创建行号列，如VB中的datagrid。

看起来像这样：

任何人都知道如何做到这一点？

Answer 1

只需编写渲染函数：

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

Answer 2

您只需在aoColumns中定义一个空列。

然后在fnRowCallback函数中，您只需按照自己喜欢的方式编辑列。每次创建新行时都会运行此回调。

基本上，如果您的第一列有行号，您可以在fnRowCallback中执行此操作：

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

Answer 3

正如我评论的那样，@ Pehmolelu和@Tao Wang的答案对我来说效果不佳。我不得不使用DataTables的索引列建议：https://datatables.net/examples/api/counter_columns.html

请注意，在我的情况下，即使列配置通过我的webapp服务器的API调用（有时我有行计数器，有时也没有），在此计数器列之前有3个系统列，因此列索引为3，但您需要调整它以满足您的需求。

t.on('order.dt search.dt', function () {
    t.column(3, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    });
}).draw();

此外，如果您的解决方案不像我的解决方案那么复杂，上面的链接还会显示您如何以不可移植的+不可搜索的方式添加该列（同样需要根据需要调整列索引）：

var t = $('#example').DataTable({
    "columnDefs": [{
        "searchable": false,
        "orderable": false,
        "targets": 3
    }],
    "order": [[4, 'asc']]
});

还有一个你可能想要使用的插件，而不是你自己的代码。

Answer 4

这是与Datatable 1.10一起使用的另一个新解决方案。

它已通过排序，搜索和页面长度更改为我工作。这是我的解决方案：

在这里简要讨论：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;
        } );
    } );
} );

Answer 5

配置中的 fnRowCallback。 使用 iDisplayIndexFull 而不是 iDisplayIndex。否则显示已显示表格的行（不分页）

$('#myTable').DataTable({
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        $('td:eq(0)', nRow).html(iDisplayIndexFull +1);
    }
});