数据表行中的子数据表

Question

我想在数据的外部行的每一行中使用一些html内容来渲染子数据。

我指的是this example，但它的子行仅呈现为html内容。相反，当我点击行以及顶部的一些html内容时，我想从ajax（对象名称＆＃39; innertb＆＃39;在下面的例子中）中渲染innerobject。

<script type="text/javascript"">
    /* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return   

    '<div class="reportwidget">' +
    '<a href="#">' +
    '<h4>'+d.Feild1+'</h4></a>' +
    '</div>'+

    '<div class="reportwidget">' +
    '<a href="#">' +
    '<h4>'+d.Feild2+'</h4></a>' +
    '</div>'+

     '<div class="reportwidget">' +
    '<a href="#">' +
   '<h4>'+d.Feild3+'</h4></a>' +
    '</div>' +

    '<div class="reportwidget">' +
    '<a href="#">' +
    '<h4>'+d.Feild4+'</h4></a>' +
    '</div>';
//child datatable innertb need to rendered here with same outertable structure(Html+Table)

}

$(document).ready(function () {

    var table = $('#example').DataTable( {
        "ajax": L_Menu_BaseUrl + "/Style Library/ServiceModule/ajax/objects.txt",

        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "code" },
            { "data": "name" },
            { "data": "place" },
            { "data": "utilized" },
            { "data": "remaining" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
</script>

我的AJAX对象返回如下内容：

{
    "data": [
        {
            "code": "0111",
            "name": "Javascript Developer",
            "place": "Place",
            "utilized": "56456",
            "remaining": "6566",
            "feild1": "5384",
            "feild2": "5384",
            "feild3": "5384",
            "feild4": "5384"
            "innertb": [
                        {
                        "code": "0222",
                        "name": "Place",
                        "place": "$183,000",
                        "utilized": "56456",
                        "remaining": "4565",
                        "feild1": "5384",
                        "feild2": "5384",
                        "feild3": "5384",
                        "feild4": "5384"
                        },
                        {
                        "code": "0333",
                        "name": "Javascript Developer",
                        "place": "Place",
                        "utilized": "456456",
                        "remaining": "5465",
                        "feild1": "5384",
                        "feild2": "5384",
                        "feild3": "5384",
                        "feild4": "5384"
                        }
                    ]
        },
        {
            "code": "1111",
            "name": "Javascript Developer",
            "place": "$183,000",
            "utilized": "2011\/06\/27",
            "remaining": "Singapore",
            "feild1": "5384",
            "feild2": "5384",
            "feild3": "5384",
            "feild4": "5384"
            "innertb": [
                        {
                        "code": "1222",
                        "name": "Javascript Developer",
                        "place": "$183,000",
                        "utilized": "2011\/06\/27",
                        "remaining": "Singapore",
                        "feild1": "5384",
                        "feild2": "5384",
                        "feild3": "5384",
                        "feild4": "5384"
                        },

                        {
                        "code": "1333",
                        "name": "Javascript Developer",
                        "place": "$183,000",
                        "utilized": "2011\/06\/27",
                        "remaining": "Singapore",
                        "feild1": "5384",
                        "feild2": "5384",
                        "feild3": "5384",
                        "feild4": "5384"
                        }
                    ]
        }
    ]
}