DataTables 加载 ajax 源数据时出错

Question

我在尝试加载 DataTables ajax 源数据时遇到以下错误：

DataTables warning: table id=report-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7

下面是我的数据表html:

<table id="report-table" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </tfoot>
</table>

下面是我的数据表javascript:

$('#report-table').DataTable({
    "ajax": data,
    "columns": [
        {
            "data": "PageId",
            "orderable": true
        },
        {
            "data": "SchemaName",
            "orderable": false
        },
        {
            "data": "Name",
            "orderable": true
        },
        {
            "data": "LastModified",
            "orderable": true
        },
        {
            "data": "LastModifiedUser",
            "orderable": true
        },
    ],
    "order": [[3, "desc"]]
});

下面是已确认的 json 我的 C# 控制器正在返回 DataTables ajax 数据：

{
   "data":[
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      }
   ]
}

错误似乎与JSON格式有关，但不确定哪里出了问题？

编辑：

正在添加完整的 javascript 代码：

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: 'json',
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "ajax": data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>

Answer 1

数据源应该是包含tbody中数据的数组数组说

data = [
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"]
];

查看示例 [https://datatables.net/examples/data_sources/js_array.html][1]

此外，使用 data: data.data 而不是 "ajax" : data

Answer 2

由于您的 JSON 响应是对象而不是数组，请指定 ajax 以获取 JsonResponse.data，如下所示：

"ajax": {
    "url": /* Your Get Data API url */,
    "dataSrc": function (json) {
        return json.data;
    },
},

或

"ajax": {
    "url": /* Your Get Data API url */,
    "dataSrc": "data"
},

JQuery answer

更新：由于 Post 所有者更改了要求，从 json.data 更改为 data。

data: data

$.ajax({
    type: "POST",
    url: "@Url.Action("GetReportJson", "Report")",
    data: data,
    dataType: 'json',
    beforeSend: function (data) {
    },
    success: function (data) {
        // Report DataTables Init
        // ===========================================
        $('#report-table').DataTable({
            "data": data,  
            ...  // Remaining DataTable configurations
        });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    },
    complete: function (data) {
    }
});

Output

参考

ajax - DataTables.net

Answer 3

您的 <script> 块应该如下所示，以初始化数据表的数据：

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: "json",
                method: "post",
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "data":data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>

DataTables 加载 ajax 源数据时出错

DataTables error loading ajax source data

c#

asp.net

asp.net-mvc

jquery

datatables