jquery datatable 渲染时出错

Question

我正在尝试通过 ajax 用数据填充 JQuery 数据表：

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 警告：表 id=table-productMaterials - 请求第 0 行的未知参数“0”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

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

Answer 1

您必须将 columns 属性放在 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);
});

然后就可以了。