Nested jquery Data Table

@{
    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;
}
</style>
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<script type="text/javascript" src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/scripts/DataTables/jquery.dataTables.js"></script>
<div class="container">
    <table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;" id="tb"></table>
    <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">
    /* Formatting function for row details - modify as you need */
    function format(d) {

        //var n = $('#tb');
        //n.find('tr').each(function (i, j) {
        //    $(j).remove();
        //});
        //$.ajax({
        //         url: "/Home/Get",
        //         type: 'Get',
        //         datatype: 'json',
        //         cache: false,
        //         data: { DID: d.DID },
        //         success: function (Data) {
        //             $.each(Data, function (i, j) {
        //            n.append("<tr class='c'><td>"+j.EID+"</td><td>"+j.NAME+"</td></tr>");
        //             });

        //         }

        //});
        //return n;
       
       
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>' +
                    '<td>Full name:</td>' +
                    '<td>' + d.name + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Extension number:</td>' +
                    '<td>' + d.extn + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Extra info:</td>' +
                    '<td>And any further details here (images etc)...</td>' +
                '</tr>' +
            '</table>';
       

     
     
    }

    $(document).ready(function () {

        var table = null;
        $.ajax({
            "url": "/Home/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']]
                });
            }
            });
       
        // 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>