javascript 将索引列添加到数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28936966/
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 Index column to dataTable
提问by Cijo V J
Suppose I have the following json to display in my DataTable:
假设我有以下 json 显示在我的 DataTable 中：
// 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" }
]
} );
What I want is, Add an Index Column to this data table for number the row. Something like this :
我想要的是，向该数据表添加一个索引列以对行进行编号。像这样的事情：
"columns": [
{"data" : "Index"}, <------- this should number my rows
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
Note: I don't have any Index as data passed in my Json(Although I can do that, is there any better solution to handle this in my Javascript itself? )
注意：我没有任何索引作为在我的 Json 中传递的数据（虽然我可以这样做，但有没有更好的解决方案来在我的 Javascript 中处理这个问题？）
Help appreciated..!
帮助赞赏..！
回答by dimyG
The concept is that you have to create the initial "Index" values either in javascript or in the server. The values can be zero or just empty strings or whatever (there is no need to calculate a counter or something). For example you can create an index column in javascript after you have received the data:
这个概念是您必须在 javascript 或服务器中创建初始“索引”值。这些值可以是零或只是空字符串或其他任何东西（不需要计算计数器或其他东西）。例如，您可以在收到数据后在 javascript 中创建索引列：
for (var i=0; i<data.length; i++){
data[i].index = 0;
}
So now that you have the index column in your data you declare it as the first column of your table:
因此，现在您的数据中有索引列，您将其声明为表的第一列：
$('#example').dataTable( {
.....
"columns": [
{ "data": "index" },
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
} );
Now the index values are all 0. To create the real index values that will be shown in the table you need to add an event handler that listens to the ordering and searching of the table. On these events the real index values will be calculated as described in the datatables example:
现在索引值全部为 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();
When the table is searched or ordered (ordering is done by default when the table is created - see default value of the order option), the innerHtml of the "Index" cells will be calculated based on the index of the row.
当表格被搜索或排序时（排序是在创建表格时默认完成的 - 请参阅 order 选项的默认值），“Index”单元格的 innerHtml 将根据行的索引进行计算。
回答by Atul Kumar
Try this.
试试这个。
"render": function ( data, type, full, meta ) {
return meta.row + 1;
} },
回答by Mickey
Just add the code below to your datatables
只需将下面的代码添加到您的数据表中
{ 'data': 'id', defaultContent: '' },
"columnDefs": [ ////define column 1 , make searchable false
{
"searchable": false,
"orderable": false,
"targets": 0
},
Below is the updated code:
以下是更新后的代码：
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
},
]
});
And the following line will add number to your id(index)column:
以下行将为您的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();
Live example: http://live.datatables.net/woboviqi/2/edit
回答by Angel Labrada Massó
That is simple... This work for me.
这很简单......这对我有用。
Cell: function ( data, type, full, counter ) {
return data.index + 1
}
回答by AC CA
enter link description here
在此处输入链接描述
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();回答by AC CA
enter link description here
在此处输入链接描述
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" }
});回答by Kevin Goyal
Here is my code you can refer to:
这是我的代码，您可以参考：
- My DataTable is complete custom.
- I'm fetching data from the database using Ajax and CodeIgniter.
- 我的 DataTable 是完全自定义的。
- 我正在使用 Ajax 和 CodeIgniter 从数据库中获取数据。
HTML
HTML
<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>JS Script
JS脚本
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();Hope it helps!
希望能帮助到你！
回答by Arun P Johny
You can use unshift()
您可以使用unshift()
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
].unshift({"data" : "Index"})
Or by using an temp array
或者通过使用临时数组
var cols = [{
"data": "engine"
}, {
"data": "browser"
}, {
"data": "platform"
}, {
"data": "version"
}, {
"data": "grade"
}];
cols.unshift({
"data": "Index"
})
....
"columns": cols
