服务器端处理模式下的表中没有可用数据

Question

我想使用服务器端处理模式将我的记录数据显示到由 jQuery DataTables 插件增强的表中。我关注了文档Datatables Server side，但在我的表格中我无法显示记录数据。

这是我的 Ajax 响应：

{
    "draw": 0,
    "recordsTotal": 4,
    "recordsFiltered": 4,
    "data": [
        [
            27,
            "Brokoli Segar",
            "25000"
        ],
        [
            28,
            "Tomat Super",
            "2000"
        ],
        [
            29,
            "Oreo Roll",
            "9400"
        ],
        [
            30,
            "Close Up Toothpaste Fire Freeze",
            "7000"
        ]
    ],
    "queries": [
        {
            "query": "select count(*) as aggregate from (select '1' as row_count from `product` where `product`.`deleted_at` is null) count_row_table",
            "bindings": [],
            "time": 0.79
        },
        {
            "query": "select `id`, `name`, `price` from `product` where `product`.`deleted_at` is null",
            "bindings": [],
            "time": 0.68
        }
    ],
    "input": []
}

我的 HTML 表格：

<table class="table table-bordered" id="tabelStokBarang">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nama Barang</th>
                <th>Harga Barang</th>
            </tr>
        </thead>
    </table>

我的 JavaScript：

$('#tabelStokBarang').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('admin.product.stock.getAll') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'price', name: 'price' }
        ]
    });

我在表格中的结果仍然是“无可用数据”。我不知道我错过了什么。

Answer 1

删除columns 以匹配您的数据，因为您将行作为数组返回，但columns 属性期望行是具有id、name 和price 属性的对象。请看下面的代码：

$('#tabelStokBarang').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{!! route('admin.product.stock.getAll') !!}'
});

另一个潜在的问题是您的draw 参数是0。您的脚本应返回与请求中的 draw 参数值相同的 draw 参数。我相信它从1 开始，然后随着每个请求而递增。

来自manual：

draw

此对象响应的绘制计数器 - 来自作为数据请求的一部分发送的 draw 参数。请注意，出于安全原因强烈建议将此参数转换为整数，而不是简单地将其在 draw 参数中发送的内容回显给客户端，以防止跨站点脚本(XSS) 攻击。