有效“列”选项参数的 JQuery Datable 抛出错误

Question

好的，所以我有一个结构如下的 jquery 数据表

$(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", "autoWidth": true },
                { "data": "data3", "name": "data3", "autoWidth": true },
                { "data": "data4", "name": "data4", "autoWidth": true },
                { "data": "data5", "name": "data5", "autoWidth": true },
                { "data": "data6", "name": "data6", "autoWidth": true },
                { "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

Answer 1

获得您想要的东西的方法不止一种。这是一种方法，它使用分配给每一行的内部 DataTables 索引。此分配纯粹是顺序的：添加到表的第一行（来自 JSON 中的第一个数据对象）是索引 0 - 依此类推：

  "columnDefs": [ {
    "targets": 0,
    "render": function ( data, type, row, meta ) {
      return meta.row + 1;
    }
  } ]

您的示例中已经有一个targets: 0，因此添加它应该很简单。

当您排序和过滤时，分配的索引将坚持到行。

如果您想要一个在表中直观地表示行在哪里的索引，那就更复杂了（当然，使用服务器提供的数据是不可行的）。