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
}

我還可以說，由於每次刷新后在控制台中輸出繪制的table drawn ，因此DataTables試圖繪制結果。

誰能指出我正確的方向？

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