将行号列添加到 jquery 数据表答案

【问题标题】：Add row number column to jquery datatables将行号列添加到 jquery 数据表
【发布时间】：2011-10-15 19:38:38
【问题描述】：

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

看起来像这样：

有人知道怎么做吗？

【问题讨论】：

你是如何加载数据表的？显示一些代码
您需要的只是计算结果（在 json 或数组中）然后迭代它以生成一个序列号并与其他结果数据一起构建它。

标签： jquery html datatables

【解决方案1】：

只需要写一个渲染函数：

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

【讨论】：

就是这样。漂亮干净 (;
这听起来像是最好的解决方案，但是一旦我按列排序，数字就会被破坏

【解决方案2】：

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

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

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

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

【讨论】：

thx，我已经尝试过了，它是成功的 :D 现在，我怎样才能使第一列不可排序？？
哦，是的，看来方法是成功的，但是当我在datables中更改页码时，行号仍然从1开始，如何使它连续编号直到最后一页？？
哦，那么你想使用：iDisplayIndexFull :)
当我应用这个时，每个页面都从 1 开始。
@CsabToth 阅读你之前的评论

【解决方案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']]
});

您可能还想使用一个插件来代替您自己的代码。

【讨论】：

你能在 live.datatables.net 上提供一个样本吗？
@Julius 目前没有

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这是另一个适用于 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;
        } );
    } );
} );

【讨论】：