將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)
    });
 }})