Question

我有一个嵌套的词典如下：

var dataSet = [{"s_group": [{"range_name": null, 
                             "name": "XXXXXXXXXXXX"}], 
                "configfile": "XXXXXXXXXXX", 
                "src_port": ["0-65535"], 
                "d_group": [{"range_name": null, 
                             "name": "YYYYYYYYYYY"}], 
                "action": "accept", 
                "protocol": "nun", 
                "dst_port": ["NN"]}]

我可以使用action，protocol，dst_port和src_port的数据表创建包含上述数据的表格。但不适用于s_group和d_group

<script>
$(document).ready(function() {
        $('#sg_rules').html( '<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>' );
        $('#sg_table').dataTable( {
                "data": dataSet,
                "columns": [
                { "title": "Action", "data": "action" },
                { "title": "Protocol", "data": "protocol" },
                { "title": "SRC_PORT", "data": "src_port" },
                { "title": "DST_PORT", "data": "dst_port" }
                ]
        } );   
} );
</script>

JSFiddle：http://jsfiddle.net/1s0jbm2z/

我无法向表格显示s_group和d_group，因为它们是另一个词典。我想将它们显示为嵌套表。

Answer 1

我认为这就是你想要的。

$(document).ready(function () {
    $('#sg_rules').html('<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-condensed" id="sg_table"></table>');
    $('#sg_table').dataTable({
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return '<table><tr><td>'+data[0].range_name+'</td><td>'+data[0].name+'</td></tr></table>';
                },
                "targets": [0, 1]
            }
        ],
        "data": dataSet,
            "columns": [{
            "title": "s_group",
            "data": "s_group"
        }, {
            "title": "d_group",
            "data": "d_group"
        }, {
            "title": "Action",
            "data": "action"
        }, {
            "title": "Protocol",
            "data": "protocol"
        }, {
            "title": "SRC_PORT",
            "data": "src_port"
        }, {
            "title": "DST_PORT",
            "data": "dst_port"
        }]
    });
});

DataTable - 如何实现嵌套数据表？

1 个答案: