问题描述
$(document).ready(function () {
var table = $('#tableContent').DataTable({
"processing": true,"serverSide": true,"filter": true,"ajax": {
"url": "path/to/api","type": "POST","datatype": "json"
},"columnDefs": [{
"searchable": false,"orderable": false,"targets": 0
}],"columns": [
null,{ "data": "data1","name": "data1","autoWidth": true },{ "data": "data2","name": "data2",{ "data": "data3","name": "data3",{ "data": "data4","name": "data4",{ "data": "data5","name": "data5",{ "data": "data6","name": "data6",{ "data": "data7","name": "data7","autoWidth": true }
],"order": [[1,'asc']]
});
table.on('order.dt search.dt page.dt',function () {
table.column(0,{ search: 'applied',order: 'applied' }).nodes().each(function (cell,i) {
cell.innerHTML = i + 1;
});
}).draw();
});
<table class="tableWrapper" id="tableContent">
<thead>
<tr>
<th>#</th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
<th>data4</th>
<th>data5</th>
<th>data6</th>
<th>data7</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
这是对被调用的 Api 的 JSON 响应
{
"draw":"1","recordsFiltered":48,"recordsTotal":48,"data":[
{
"data1":"XXXX","data2":"XXXX","data3":"XXXX","data4":"XXXX","data5":"XXXX","data6":"XXXX","data7":"XXXX"
}...
]
}
它抛出这个错误:
“DataTables 警告:table id=tableContent - 为第 0 行、第 0 列请求未知参数“0”。有关此错误的详细信息,请参阅 http://datatables.net/tn/4" (Attached error message picture)
但是!抛出错误后不久,数据加载没有问题。
用 null
替换 {data:null}
似乎消除了错误,但它与我的索引列相混淆。本来应该是 1,2,3,4... 的序列现在只是一堆 [object Object]
see image
解决方法
获得您想要的东西的方法不止一种。这是一种方法,它使用分配给每一行的内部 DataTables 索引。此分配完全是顺序的:添加到表中的第一行(来自 JSON 中的第一个数据对象)是索引 0 - 依此类推:
"columnDefs": [ {
"targets": 0,"render": function ( data,type,row,meta ) {
return meta.row + 1;
}
} ]
您的示例中已经有一个 targets: 0
,因此添加它应该很简单。
当您排序和过滤时,分配的索引将粘在该行上。
如果您想要一个索引来表示行在表中的位置,这会更复杂(当然,使用服务器提供的数据是不可行的)。