Question

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

据我所知，我的内容是正确的..但是当我加载页面时，我看到的只是"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”中的项目应该是对象，而不是数组，即

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

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

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

请参阅https://datatables.net/release-datatables/examples/ajax/objects.html

JQuery DataTables服务器端处理不呈现

1 个答案: