将行号列添加到 jquery 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6871198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add row number column to jquery datatables
提问by Xinez
I want jQuery datatables to automatically create row number column in the first column like datagrid in VB.
我希望 jQuery 数据表像 VB 中的 datagrid 一样在第一列中自动创建行号列。
It looks like this:
它看起来像这样：
Anyone knows how to do this?
任何人都知道如何做到这一点？
采纳答案by Pehmolelu
You just define an empty column in aoColumns.
您只需在 aoColumns 中定义一个空列。
Then in fnRowCallback function you just edit the column how you like. This callback is run every time new row is created.
然后在 fnRowCallback 函数中，您只需编辑您喜欢的列。每次创建新行时都会运行此回调。
Basicly if your first column has the row number, you could just do this in fnRowCallback:
基本上，如果您的第一列有行号，您可以在 fnRowCallback 中执行此操作：
var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
回答by Tao Wang
Just write a render function:
只需编写一个渲染函数：
{
"data": "id",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
}
回答by Csaba Toth
As I commented, both @Pehmolelu and @Tao Wang's answer was not working well for me. I had to go with what the DataTables's Index Column advises: https://datatables.net/examples/api/counter_columns.html
正如我评论的那样，@Pehmolelu 和@Tao Wang 的回答对我来说都不是很好。我不得不按照 DataTables 的索引列的建议去做：https: //datatables.net/examples/api/counter_columns.html
Note that in case of me even the column configuration is coming down through an API call of my webapp server (and sometimes I have row counters, sometimes don't), there are 3 system column before this counter column, hence the column index is 3, but you need to adjust it to fit your needs.
请注意，在我的情况下，即使列配置通过我的 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();
Also, if your solution is not as complex as mine the link above also shows how you add that column in an unsortable + unsearchable way (again you need to adjust the column index to your needs):
此外，如果您的解决方案不像我的那么复杂，上面的链接还显示了如何以不可排序 + 不可搜索的方式添加该列（同样，您需要根据需要调整列索引）：
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 3
}],
"order": [[4, 'asc']]
});
There's also a plugin you may want to utilize instead of your own code.
还有一个您可能想要使用的插件而不是您自己的代码。
回答by Araf Hossain
Here is an another new solution which works with Datatable 1.10.
这是另一个适用于 Datatable 1.10 的新解决方案。
It has worked for me through sorts, searches, and page length changes. Here is my solution:
它通过排序、搜索和页面长度更改对我有用。这是我的解决方案：
Briefly discussed in here: https://datatables.net/examples/api/counter_columns.html
在这里简要讨论：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;
} );
} );
} );