javascript - 使用 json (ajax) 将数据表对象放在新行中

Question

到目前为止，我已经能够使用数据表，通过 ajax 从 json 显示数据，没有任何问题。但今天我遇到了这个问题。 Json 具有以下结构:

{
    "aaData": [
        {
            "id": 22,
            "name": "flavor 22",
            "flavorItem": [
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                },
                {
                    "hostSuffix": "google"
                },
                {
                    "hostSuffix": "yahoo"
                }
            ]
        }
    ]
}

当加载到数据表中时，这会显示同一行中的所有对象“hostSuffix”。如何为每个对象显示新行？

我的脚本:

$("#example").dataTable({
    "serverSide": true,
    "searching": false,
    "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
    "iDisplayLength": 10,
    "ajax": "<c:url value='/ajax/selectflavorEditor?id=22'/>",
    "columns": [
        {"data": "flavorItem[, ].hostSuffix"}

    ]
});

Answer 1

您必须将 dataSrc 设置为指向嵌套数组 flavorItem :

$("#example").dataTable({
    "serverSide": true,
    "searching": false,
    "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
    "iDisplayLength": 10,
    "ajax": {
        url: "<c:url value='/ajax/selectflavorEditor?id=22'/>",
        dataSrc: function(json) {
            return json['aaData'][0].flavorItem
        }
    },
    "columns": [
        {"data": "hostSuffix"}
    ]
});