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

Question

I have a nested dict like following:

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"]}]

I am able to create a table with above data using datatable for action , protocol , dst_port and src_port . But not for s_group and 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/

I am not able to display s_group and d_group to the table as they are another dict. I want to display them as a nested table.

Answer 1

I think this is what you want.

$(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"
        }]
    });
});