JQuery DataTables 服务器端处理未呈现

Question

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

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

我正在使用 DataTables 1.10.9。

我的table是这样设置的：

<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>

这是 Javascript 初始化 DataTable。

$('#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"里面的item应该是对象，而不是数组，即

"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

JQuery DataTables 服务器端处理未呈现

JQuery DataTables Server-Side Processing Not Rendering

javascript

jquery

datatables

datatables-1.10