假设我有以下 json 要在我的数据表中显示：
// JSON structure for each row in this example:
// {
// "engine": {value},
// "browser": {value},
// "platform": {value},
// "version": {value},
// "grade": {value}
// }
$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
} );
我想要的是，向该数据表添加索引列以对行进行编号。 像这样的东西：
"columns": [
{"data" : "Index"}, <------- this should number my rows
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
注意：我的 Json 中传递的数据没有任何索引（虽然我可以做到这一点，但有没有更好的解决方案来在我的 Javascript 本身中处理这个问题？）
帮助感激..！
试试这个。
"render": function ( data, type, full, meta ) {
return meta.row + 1;
} },
这个概念是您必须在 JavaScript 或服务器中创建初始“索引”值。这些值可以为零或只是空字符串或其他任何值（不需要计算计数器或其他东西）。例如，您可以在收到数据后在 javascript 中创建索引列：
for (var i=0; i<data.length; i++){
data[i].index = 0;
}
现在您的数据中有索引列，您可以将其声明为表的第一列：
$('#example').dataTable( {
.....
"columns": [
{ "data": "index" },
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
} );
现在索引值都是 0。要创建将在表中显示的真实索引值，您需要添加一个事件处理程序来侦听表的排序和搜索。对于这些事件，实际指数值将按照以下描述进行计算： 数据表示例：
datatable_object.on( 'order.dt search.dt', function () {
datatable_object.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
当搜索或排序表格时（创建表格时默认进行排序 - 请参阅排序选项的默认值），“索引”单元格的innerHtml将根据行的索引计算。
需要使用DT_RowIndex来索引行。像这样 - ## 标题 ##
"columns": [
{ "data": 'DT_RowIndex'}, // row index
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
只需将下面的代码添加到您的数据表中
{ 'data': 'id', defaultContent: '' },
"columnDefs": [ ////define column 1 , make searchable false
{
"searchable": false,
"orderable": false,
"targets": 0
},
以下是更新后的代码：
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{ 'data': 'id', defaultContent: '' },
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" },
"columnDefs": [ ////define column 1
{
"searchable": false,
"orderable": false,
"targets": 0
},
]
});
下面的行会将数字添加到您的
id(index)if (t.data().length != 0) {
t.on('order.dt search.dt', function () {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
t.cell(cell).invalidate('dom');
});
}).draw();
您可以使用 unshift()
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
].unshift({"data" : "Index"})
或者使用临时数组
var cols = [{
"data": "engine"
}, {
"data": "browser"
}, {
"data": "platform"
}, {
"data": "version"
}, {
"data": "grade"
}];
cols.unshift({
"data": "Index"
})
....
"columns": cols
看看这个网址：数据表索引列
它可能对你有帮助。
这是我的代码，您可以参考：
<table width="100%" class="table table-striped table-hover" id="table_id_dataTable">
<thead>
<tr>
<th>Sr No</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Sr No</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>var temp_table = $('#table_id_of_dataTable').DataTable({
"language": {
"zeroRecords": "No records found."
},
"ajax": {
"type": "POST",
"url": "<?php echo base_url('Controller/method'); ?>"
},
"responsive": true,
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": 0
}
],
"order": [
[1, 'asc']
],
"columns": [
{ "data": null }, // <-- This is will your index column
{ "data": "column_2_element_name_given_in_controller" },
{ "data": "column_3_element_name_given_in_controller" },
{ "data": "column_4_element_name_given_in_controller" },
{ "data": "column_5_element_name_given_in_controller" }
]
});
// Here we create the index column in jquery datatable
temp_table.on('order.dt search.dt', function() {
temp_nuggets_table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();希望有帮助！
这很简单...这对我来说很有效。
Cell: function ( data, type, full, counter ) {
return data.index + 1
}
在此输入链接描述
Try this:
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{
"data": null, "render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
});
table.on('order.dt search.dt', function () {
table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();在此输入链接描述
Try this:
var table=$('#example').dataTable( {
"ajaxSource": "sources/objects.txt",
"columns": [
{
"data": null, "render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
});您可以在下面设置添加带有id的索引列
============代码================ 让 oTable = $('.dataTable').DataTable({ 处理：真实， 服务器端：正确， lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "显示全部"]], 阿贾克斯：{ url: "{{route('route')}}", 类型：'POST'，标题：{'X-CSRF-TOKEN'：'{{csrf_token（）}}'}， 数据：函数（d）{ d.date = $('输入[名称=日期]').val(); } }, 列： [ {“数据”：'DT_RowIndex'，“名称”：'DT_RowIndex'，可搜索：false}， {数据：'日期'，名称：'日期'，可搜索：true}， ] }); 我在我的 Laravel 代码中使用了这个