将行号列添加到 jquery 数据表

Posted 2023-05-07

【中文标题】将行号列添加到 jquery 数据表

【英文标题】：Add row number column to jquery datatables

【发布时间】：2011-10-15 19:38:38

【问题描述】：

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

看起来像这样：

有人知道怎么做吗？

【问题讨论】：

你是如何加载数据表的？显示一些代码

您需要的只是计算结果（在 json 或数组中）然后迭代它以生成一个序列号并与其他结果数据一起构建它。

【参考方案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;
         );
     );
 );