jquery 数据表渲染时出错

Question

我正在尝试通过 ajax:

使用数据填充 JQuery 数据table

HTML

<table id="table-productMaterials">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Status</th>
        </tr>
    </thead>
</table>

Javascript

$(document).ready(function () {
    var options = {
        "processing": true,
        "ajax": {
            "url": "ProductMaterials.ashx?action=get",
            "type": "POST",
            "data": {
                "productId": $('#product_id').val()
            },
            "columns": [
                        { "data": "Id" },
                        { "data": "MaterialName" },
                        { "data": "Quantity" },
                        { "data": "Status" }
            ]
        },
    };
    table = $('#table-productMaterials').DataTable(options);
});

通用处理程序输出：

{"data": [{"Id":1,"Quantity":15.00,"Status":"1","MaterialName":"Iron","ProductName":"French onion soup"},{"Id":3,"Quantity":14.00,"Status":"1","MaterialName":"Nails","ProductName":"French onion soup"}]}

重新加载数据时出现错误消息： DataTables 警告：table id=table-productMaterials - 为第 0 行请求了未知参数“0”。有关此错误的详细信息，请参阅 http://datatables.net/tn/4

我参考了此页面并阅读了示例，但似乎无法解决此问题。我做错了什么？

Answer 1

您必须像这样将属性列放在 ajax 属性之外：

$(document).ready(function () {
    var options = {
        "processing": true,
        "ajax": {
            "url": "ProductMaterials.ashx?action=get",
            "type": "POST",
            "data": {
                "productId": $('#product_id').val()
            },
        },
        "columns": [
                                { "data": "Id" },
                                { "data": "MaterialName" },
                                { "data": "Quantity" },
                                { "data": "Status" }
        ]
    };
    table = $('#table-productMaterials').DataTable(options);
});

然后就可以了

jquery 数据表渲染时出错

jquery datatable gives error when rendering

javascript

ajax

datatable

jquery