JQuery DataTables服务器端处理不呈现

Question

我正在尝试使用服务器端处理来实现 DataTables。

据我所知，我所拥有的是正确的。但是当我加载页面时，我看到的只是"No matching records found"。

我正在使用 DataTables 1.10.9。

我的桌子是这样设置的：

<table id="resellerListTable" class="table table-hover table-condensed display dataTable no-footer" role="grid">
    <thead>
    <tr role="row">
        <th class="sorting_disabled" name="asd"></th>
        <th class="sorting_disabled">Name</th>
        <th class="sorting_disabled">Active</th>
        <th class="sorting_disabled no-sort"></th>
    </tr>
    </thead>
    <tfoot>
    <tr role="row">
        <th class="sorting_disabled" name="asd"></th>
        <th class="sorting_disabled">Name</th>
        <th class="sorting_disabled">Active</th>
        <th class="sorting_disabled no-sort"></th>
    </tr>
    </tfoot>
</table>

这是初始化 DataTable 的 Javascript。

$('#resellerListTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        type: 'POST',
        url: self.ajaxRoute,
        data: function (d) {
            // Format DataTables data for the API, and include some required data.
            var returnData = {
                controller: controller,
                method: method,
                data: d,
            };
            window.$.extend(returnData.data, data);
            return JSON.stringify(returnData);
        },
        dataSrc: function (d) {
            // Format API response for DataTables
            var response = d;
            if (typeof d.response != 'undefined') {
                response = d.response;
            }
            console.log(JSON.stringify(response)); // Output from this is below...
            return response;
        },
        async: true,
        error: function (e) {
            console.log(e);
        },
        drawCallback: function() {
            console.log('table drawn');
        }
    }
});

这是上面console.log()记录的输出

{
    "data": [
        [
            "<img src='' />",
            "Something 1",
            "not active",
            "<a href='/retailer/edit/1'>Edit</a><a href='/retailer/delete/1'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 2",
            "not active",
            "<a href='/retailer/edit/2'>Edit</a><a href='/retailer/delete/2'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 3",
            "not active",
            "<a href='/retailer/edit/3'>Edit</a><a href='/retailer/delete/3'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 4",
            "not active",
            "<a href='/retailer/edit/4'>Edit</a><a href='/retailer/delete/4'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 5",
            "not active",
            "<a href='/retailer/edit/5'>Edit</a><a href='/retailer/delete/5'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 6",
            "not active",
            "<a href='/retailer/edit/6'>Edit</a><a href='/retailer/delete/6'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 7",
            "not active",
            "<a href='/retailer/edit/7'>Edit</a><a href='/retailer/delete/7'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 8",
            "not active",
            "<a href='/retailer/edit/8'>Edit</a><a href='/retailer/delete/8'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 9",
            "not active",
            "<a href='/retailer/edit/9'>Edit</a><a href='/retailer/delete/9'>Delete</a>"
        ],
        [
            "<img src='' />",
            "Something 10",
            "not active",
            "<a href='/retailer/edit/10'>Edit</a><a href='/retailer/delete/10'>Delete</a>"
        ]
    ],
    "recordsTotal": "23",
    "recordsFiltered": "23",
    "draw": 1
}

我还可以看出，DataTables 正在尝试绘制结果，因为每次刷新后都会在控制台中输出 table drawn。

谁能指出我正确的方向？

Answer 1

有几点：

1) 在dataSrc回调中放

return response.data; 

而不是

return response; 

根据https://datatables.net/reference/option/ajax.dataSrc 的示例

2）我认为JSON中“数据”中的项目应该是对象，而不是数组，即

"data": [ { "<img src='' />", "Something 1", "not active", "<a href='/retailer/edit/1'>Edit</a><a href='/retailer/delete/1'>Delete</a>" }... 

注意 {...} 表示一个对象，而不是 [...] 表示一个数组。并且对象中的每个项目都应该有一个属性名称，表示它所属的列，例如。

"column1": "<img src='' />"

见https://datatables.net/release-datatables/examples/ajax/objects.html