将JSON数据添加到DataTable

Question

希望有人可以为我访问此文件，因为我无法弄清楚。

数据已成功接收，但是数据不会加载到表中。 没有错误信息。 只是根本不会做。 以前，当我在DataTable中使用ajax调用时，此方法起作用，但是当我将Ajax调用移至DataTable创建之外时，则不起作用。

JSON数据示例：

{
    "data":[
        {
            "Id": 1,
            "Name": "Fred"
        },
        {
            "Id": 2,
            "Name": "Tommy"
        }
    ]
}

获取JSON的函数调用：

function getJSON() {
    $.ajax({
        url: "Home/GetList",
        type: "GET",
        datatype: "json"
    }).done(function(data) {
        drawDataTable('Table', data);
    });
}

绘制数据表

function drawDataTable(divId, data) {
    var table = $('#' + divId).DataTable({
        data: data,
        dataSrc: "",
        columnDefs: [
            { "targets": [0], "data": "Id" },
            { "targets": [1], "data": "Name" }
        ]
    });
    return table;
}

然后，我通过function drawDataTable(divId, data)将这个大数据数组（1000个数组元素）发送到我的Datatable函数

在该DataTable函数中，我使用：

data: data,
dataSrc: ""

我也尝试过删除dataSrc并将其设置为dataSrc: "data"但均dataSrc: "data" 。

Answer 1

我认为您错过了JSON的结构，请尝试使用data.data

 function drawDataTable(divId, data) {
        var table = $('#' + divId).DataTable({
            data: data.data, //updated here
            dataSrc: "",
            columnDefs: [
                { "targets": [0], "data": "Id" },
                { "targets": [1], "data": "Name" }
            ]
        });
        return table;
    }

Answer 2

确保您正在此函数中编写代码

$(document).ready(function() { 
// your code
}

因为在此之外编写的任何内容均可能无法正常工作，尤其是在使用dataTables时。

另外，您可以按以下方式编写此代码（如果有帮助的话）

$(document).ready(function() {
   function drawDataTable(divId,data) {
   var t = $('#'+ divId).DataTable();
   var dataObj = JSON.parse(data);
   dataObj.forEach(element => {
      t.row.add([
            element.Id,
            element.name
         ]).draw(false)
    });
 }})