Nested jquery Datatable

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<h2>Jay Jagannath...</h2>
<style>
    td.details-control {
        background: url('../Content/DataTables/images/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('../Content/DataTables/images/details_close.png') no-repeat center center;
    }
    .c {
    list-style:none;
    }
</style>
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>
<div class="container">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>DID</th>
                <th>DNAME</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script type="text/javascript">
   
    function format(d) {

        var tr = $(document.createElement('div'));
        $.ajax({
                 url: "/Test/Get",
                 type: 'Get',
                 datatype: 'json',
                 cache: false,
                 data: { DID: d.DID },
                 success: function (Data) {
                     $.each(Data, function (i, j) {
                         tr.append("<li  >" + j.EID + "<\li><li >" + j.NAME + "<\li>");
                     });

                 }

        });
        tr.addClass("c");
        return tr;
    }

    $(document).ready(function () {

        var table = null;
        $.ajax({
            "url": "/Test/Gets",
            type: 'Get',
            datatype: 'json',
            cache:false,
            success: function (Data) {
             table=$('#example').DataTable({
                    data:Data,
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { "data": "DID" },
                        { "data": "DNAME" }
                    ],
                    "order": [[1, 'asc']]
                });
            }
            });

       
        $('#example tbody').on('click', 'td.details-control', function () {

            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
               
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
               
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });
</script>