Question

嗨，我有一个来自AJAX响应的JSON数据，它具有嵌套数组。

[{
    "Solution": "MobileBroadband",
    "Operator": "MTN",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    },
    {
        "vendor": "saef",
        "name": "vEPG",
        "release": "2.4"
    }]
},
{
    "Solution": "CLoud",
    "Operator": "Airtel",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    }]
}]

如何将以上数据动态添加到数据表的列中。

我期望这样的事情：

enter image description here

Answer 1

首先，您需要相应地设置DataTables ajax选项：

$('#mytable').DataTable({
    ajax: {
        ...
        url: '/getdata' //URL to API that returns your JSON data
    }

});

接下来，您需要“展平”您的源JSON结构，以使其包含对象数组，其中每个属性对应于表列。为此，您可能需要使用ajax.dataSrc选项（以对接收到的JSON进行后处理）：

$('#mytable').DataTable({
    ajax: {
        url: '/getdata',
        dataSrc: rawJson => rawJson.map(entry => {
            entry.VNF.forEach((vnfEntry, vnfEntryIndex) => Object.entries(vnfEntry).forEach(vnfEntryProp => entry[vnfEntryProp[0] + vnfEntryIndex] = vnfEntryProp[1]));
            delete entry.VNF;
            return entry;
        })
    }
});

最后，您可能希望取消显示有关某些列缺少数据的DataTables警告（因为您为不同的运营商拥有不同数量的NFV供应商）：

$.fn.dataTable.ext.errMode = 'none';

但是您必须谨慎使用该选项，因为它会禁止来自DataTables引擎的所有错误通知。

要获得完整的演示，您可能需要查看此link。

Answer 2

尝试这样设置您的回复：

var data = [
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ],
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ],
];

var columns = [
    { "title":"One" },
    { "title":"Two" },
    { "title":"Three" }
];

$(document).ready(function() {
  $('#example').DataTable( {
    dom: "Bfrtip",
    data: data,
    columns: columns
  });
});

您可以在js小提琴中尝试一下

如何基于json数据重复列以显示数据表

2 个答案: