[英]Add Index column to 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" }
]
} );
我想要的是,向该数据表添加一个索引列以对行进行编号。 像这样的事情:
"columns": [
{"data" : "Index"}, <------- this should number my rows
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
注意:我没有任何索引作为在我的 Json 中传递的数据(虽然我可以这样做,但有没有更好的解决方案来在我的 Javascript 中处理这个问题?)
帮助赞赏..!
这个概念是您必须在 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();
当表格被搜索或排序时(排序是在创建表格时默认完成的 - 请参阅 order 选项的默认值),“Index”单元格的 innerHtml 将根据行的索引进行计算。
尝试这个。
"render": function ( data, type, full, meta ) {
return meta.row + 1;
} },
只需将下面的代码添加到您的数据表中
{ '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();
需要使用 DT_RowIndex 来索引行。 像这样 - ## 标题 ##
"columns": [
{ "data": 'DT_RowIndex'}, // row index
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]
您可以使用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
看看这个 URL:数据表索引列
它可能会帮助你。
这是我的代码,您可以参考:
<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" } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.