javascript - 无法从 AJAX 构建数据表

Question

实际上我的 VB.NET 页面中有一个 WebMethod，我可以从 MySQL 中获取一些数据。

我正在尝试使用 jQuery DataTable 用该数据创建一个表

我从服务器端获取的 JSON 构建如下:

    d: "[{"DESOP_LOG":"OPERATORE","OPERAZIONE_LOG":"LOGIN","FORM_LOG":"frmCASSA","CODART_LOG":""},{"DESOP_LOG":"OPERATORE","OPERAZIONE_LOG":"LOGOUT","FORM_LOG":"frmCASSA","CODART_LOG":""}...

正如我希望的那样，DataTable 头将从该 json 中解析出来，我尝试转换 DataTable 的表如下所示

<table class="table table-hover" id="table"></table>

因为没有头，我收到错误:无法读取未定义的属性“aDataSort”

虽然如果我只设置一个随机的头，我会得到以下的 ajax 响应

DataTables warning: table id=table - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

下面是如何构建DataTable

$('#table').DataTable({
    responsive: true,
    serverSide: false,
    processing: false,
    lengthChange: false,
    pageLength: 5,
    info: false,
    dom: '<t><p>',
    pagingType: "numbers",
    language: {
        search: "Cerca:",
        paginate: {
            first: "Inizio",
            last: "Fine",
            next: "Successivo",
            previous: "Precedente"
        },
    },
    ajax: {
        contentType: "application/json; charset=utf-8",
        url: "stats.aspx/getData",
        type: "POST",
        dataSrc: 'd',
        error: function (xhr) {
            console.log(xhr);
        }
    }
});

编辑:实际上，我已经更改了创建 DataTable 的方法，现在我没有错误地创建表，甚至创建了分页，但数据未显示在单元格中...

function loadTable(data) {
    $.ajax({
        type: "POST",
        url: "stats.aspx/getData",
        data: JSON.stringify({ data: data }),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            $('#table').DataTable({
                responsive: true,
                destroy: true,
                aaData: JSON.parse(result.d),
                lengthChange: false,
                pageLength: 5,
                info: false,
                dom: '<t><p>',
                pagingType: "numbers",
                "columnDefs": [{
                    "defaultContent": "-",
                    "targets": "_all"
                }],
                language: {
                    search: "Cerca:",
                    paginate: {
                        first: "Inizio",
                        last: "Fine",
                        next: "Successivo",
                        previous: "Precedente"
                    },
                }
            });
        },
        error: function (xhr) {
            alert(xhr.status);
        }
    });

}

Answer 1

通过使用 data 而不是 aaData 解决了这里是工作代码:

$.ajax({
    type: "POST",
    url: "stats.aspx/getData",
    data: JSON.stringify({ data: data }),
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        $('#table').DataTable({
            responsive: true,
            destroy: true,
            data: JSON.parse(result.d),
            lengthChange: false,
            pageLength: 5,
            info: false,
            dom: '<t><p>',
            pagingType: "numbers",
            columns: [
                { data: 'DESOP_LOG' },
                { data: 'OPERAZIONE_LOG' },
                { data: 'FORM_LOG' },
                { data: 'CODART_LOG', "defaultContent": ""}
            ]
        });
    },
    error: function (xhr) {
        alert(xhr.status);
    }
});