Nested jquery datatable in MVC

MVC CODE :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }
       
        [HttpGet]
        public JsonResult Gets()
        {
            List<EMP> lst1 = new List<EMP>() {
                 new EMP { DID=1, NAME="A",EID=1 },
                 new EMP { DID=1, NAME="B",EID=2 },
                 new EMP { DID=2, NAME="C" ,EID=3},
                 new EMP { DID=2, NAME="D" ,EID=4},
                  new EMP { DID=3, NAME="E" ,EID=5},
                 new EMP { DID=3, NAME="F" ,EID=6}
            };
            List<DEPT> lst = new List<DEPT>() {
                 new DEPT { DID=1, DNAME="X", LEMP=lst1.Where(m=>m.DID==1).ToList() },
                 new DEPT { DID=2, DNAME="Y",LEMP=lst1.Where(m=>m.DID==2).ToList() },
                 new DEPT { DID=3, DNAME="Z" ,LEMP=lst1.Where(m=>m.DID==3).ToList()}
            };
                 return Json(lst.ToList(), JsonRequestBehavior.AllowGet);
           
        }
        public class DEPT
        {
            public int DID { get; set; }
            public string DNAME { get; set; }
            public List<EMP> LEMP { get; set; }
        }
        public class EMP
        {
            public int EID { get; set; }
            public string NAME { get; set; }
            public int DID { get; set; }
        }
    }
}

VIEW CODE :



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

<h2>Jay Jagannath...</h2>

<style>
    .tbl {
        border:solid 1px #000000;
        height:auto;
        width:auto
    }
    td.details-control {
        background: url('../Content/DataTables/images/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    td.abc {
        background: url('../Content/DataTables/images/details_close.png') no-repeat center center;
    }
 
</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">
    <div >
        <table id="exampleTable" class="tbl">
            <thead>
                <tr>
                    <th>DID</th>
                    <th>DNAME</th>
                   
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div style="display:none" >
        <table id="detailsTable">
            <thead>
                <tr>
                    <th>EID</th>
                    <th>NAME</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>


</div>
<script type="text/javascript">

    function fnFormatDetails(table_id, html) {
        var sOut = "<table class='tbl' id=\"exampleTable_" + table_id + "\">";
        sOut += html;
        sOut += "</table>";
        return sOut;
    }
    var iTableCounter = 1;
    var oTable;
    var oInnerTable;
    var detailsTableHtml;
    $(document).ready(function () {
        detailsTableHtml = $("#detailsTable").html();
        var nCloneTh = document.createElement('th');
       var nCloneTd = document.createElement('td');
        nCloneTd.className = "center";
        $('#exampleTable thead tr').each(function () {
            this.insertBefore(nCloneTh, this.childNodes[0]);
        });
   
        var newRowData;
        var oTable = null;
        $.ajax({
            "url": "/Test/Gets",
            type: 'Get',
            datatype: 'json',
            cache: false,
            success: function (Data) {
                newRowData = Data;
                oTable = $('#exampleTable').dataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [2, 10, 20],
                    "bJQueryUI": true,
                    "aaData": Data,
                    "aoColumns": [
                         {
                             "className": 'details-control',
                             "orderable": false,
                             "data": null,
                             "defaultContent": ''

                         },
                        { "mDataProp": "DID" },
                        { "mDataProp": "DNAME" }
                    ],
                    "oLanguage": {
                        "sInfo": "_TOTAL_ entries"
                    },
                    "aaSorting": [[1, 'asc']]
                });
            }
        });


        $('#exampleTable tbody').on('click', 'td.details-control', function () {
            var nTr = $(this).parents('tr')[0];
            var nTds = this;
            if (oTable.fnIsOpen(nTr)) {
                $(this).parents('tr:first').children('td:first').removeClass("abc");
                oTable.fnClose(nTr);
            }
            else {
                $(this).parents('tr:first').children('td:first').addClass("abc");
                var rowIndex = oTable.fnGetPosition($(nTds).closest('tr')[0]);
                var detailsRowData = newRowData[rowIndex].LEMP;
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
                oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                    "bJQueryUI": true,
                    "bFilter": false,
                    "aaData": detailsRowData,
                    "bSort": true,
                    "aoColumns": [
                 { "mDataProp": "EID" },
                 { "mDataProp": "NAME" },
                 ],
                    "bPaginate": false,
                    "oLanguage": {
                        "sInfo": "_TOTAL_ entries"
                    }
                   
                });
                iTableCounter = iTableCounter + 1;
            }
        });


    });

</script>