Question

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

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

您必须将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);
});

然后它会起作用。

jquery datatable在渲染时给出错误

1 个答案: