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和{{的对象1}}。请参阅以下代码：

price

另一个潜在问题是您的$('#tabelStokBarang').DataTable({ processing: true, serverSide: true, ajax: '{!! route('admin.product.stock.getAll') !!}' });参数为draw。您的脚本应返回0参数，并在请求中使用draw参数的相同值。我相信它从draw开始，然后随着每个请求递增。

来自manual：

1

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

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

1 个答案: