Как сгенерировать таблицу данных с Json данными - PullRequest
0 голосов
/ 16 апреля 2020

У меня есть API Call abd, который будет возвращать Json, как показано ниже

{
    "status": true,
    "message": "Data Sent",
    "data": [
        {
            "id": 9,
            "name": "North",
            "colType": 7,
            "userID": 0,
            "isVisible": false
        }
    ]
}

И ниже, у меня есть JavaScript Ajax Вызов, но он возвращается Пустой, с данными, пожалуйста, помогите

$('#myTable').DataTable({
    destroy: true,
    responsive: true,
    "ajax": {
        "url": url+'/api/CommonMasters/7/GetByUserID/'+@ViewBag.UID,
        "type": "GET",
        "datatype": "json",
    },
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "columns": [
        { "data": "name", "autoWidth": true },
        {
            "render": function (data, type, full, meta) { return "<a  id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
        },

    ]

});

1 Ответ

1 голос
/ 16 апреля 2020

В разделе ajax необходимо указать источник данных: "dataSrc": "data".

"ajax": {
    "url": url+'/api/CommonMasters/7/GetByUserID/'+@ViewBag.UID,
    "type": "GET",
    "datatype": "json",
    "dataSrc": "data"
},

Зачем это нужно? Ваша JSON структура данных не имеет элемента "name" на верхнем уровне. Имена вложены в объект данных верхнего уровня. Эта дополнительная директива указывает DataTables смотреть только на объект «data» JSON в качестве его начальной точки.

См. здесь для связанной документации:

Опция ajax в основном наследует все опции, предоставляемые jQuery. ajax, но мы предоставляем дополнительную опцию dataSr c, чтобы предоставить возможность изменять то, какие данные DataTables будут читать из JSON возвращено с сервера ...

Кроме того, я не думаю, что вам нужно следующее: destroy: true - попробуйте удалить его. Вероятно, нет смысла пытаться уничтожить объект таблицы во время его инициализации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...