Добавление данных JSON в DataTable

Question

Надеюсь, что кто-то может получить доступ к этому для меня, потому что я не могу понять это.

Данные успешно принимаются, однако данные не будут загружены в таблицу.Там нет сообщения об ошибке.Просто он этого не сделает.Ранее это работало, когда я использовал вызов ajax в DataTable, но когда я перемещал вызов 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;
}

Затем я отправляю этот большой массив данных (1000 элементов массива) в мою функцию Datatable через function drawDataTable(divId, data)

И в этой функции DataTable я использую:

data: data,
dataSrc: ""

Я также пытался удалить dataSrc и сделать его 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)
    });
 }})