时间戳

首页 > 解决方案 > 如何使用 Json 数据生成 DataTable

ajax - 如何使用 Json 数据生成 DataTable

问题描述

我有 API 调用 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>"; }
        },

    ]

});

标签： ajaxdatatables

解决方案

在 ajax 部分，您需要定义数据源："dataSrc": "data".

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

为什么需要这个？您的 JSON 数据结构在顶层没有“名称”项。名称嵌套在顶级“数据”对象中。这个额外的指令告诉 DataTables 只查看 JSON 的“数据”对象作为它的起点。

有关相关文档，请参见此处：

ajax 选项基本上继承了 jQuery.ajax 提供的所有选项，但我们提供了 dataSrc 的额外选项，以提供更改 DataTables 将从服务器返回的 JSON 中读取的数据的能力......

另外，在不相关的说明中，我认为您不需要这个：destroy: true-尝试将其删除。在初始化表对象时尝试销毁它可能没有意义。

推荐阅读