title: Datatables nested (related) rows
body: <p>Been on these for most of the day now, and struggling to get any sample working correctly.</p>
  
  <p>Working with Datatables.net. What we are trying to achieve is nested related table. i.e simply click on the plus sign, and further information is displayed. The only difference is that we require this information to be pulled from a database using ajax. 
  <a href="http://datatables.net/blog/Drill-down_rows" rel="nofollow">http://datatables.net/blog/Drill-down_rows</a></p>
  
  <p>what we have so far :-</p>
  
  <pre><code>$("#IPLoader").show();
                var url = "/user/" + userid+ "/jqGetUser";
                var sImageUrl = "../../Images/General/";
  
  
                $.getJSON(url, null, function (data) {
                    $("#IPLoader").hide();
                     oTable = $('#example').dataTable({
                        "oLanguage": {
                            "sProcessing": "&lt;img src='~/Images/General/AjaxLoader.gif'&gt;"
                        },
                        "bProcessing": true,
                        "bserverSide": true,
                        "bFilter": false,
                        "aaData": data.aaData,
                        "aoColumns": [
                            {
                                "mDataProp": null,
                                "sClass": "control center",
                                "sDefaultContent": '&lt;img src="' + sImageUrl + 'details_open.png' + '"&gt;'
                            },
                            { "mDataProp": "UserID" },
                            { "mDataProp": "UserFirstName" },
                            { "mDataProp": "UserSurname" },
                            { "mDataProp": "UserAge" }
                        ]
  
                    });
  
                });
  </code></pre>
  
  <p>This works great, the table is shown as should.</p>
  
  <p>The next thing is that we need to do is to detect the click of the plus sign</p>
  
  <pre><code>$(document).on('click','#example td.control',function () {
                        var nTr = this.parentNode;
                        var i = $.inArray(nTr, anOpen);
                        if (i === -1) {
                        $('img', this).attr('src', sImageUrl + "details_close.png");
                        var oData = oTable.fnGetData(nTr);
                        var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
  
                    getdate(oData.Prvsp_Refno);
                        $('div.innerDetails', nDetailsRow).slideDown();
  
                        anOpen.push(nTr);
  
                    }
                    else {
  
                        $('img', this).attr( 'src', sImageUrl+"details_open.png" );
                        oTable.fnClose( nTr );
                        anOpen.splice( i, 1 );
                    } 
                });
  
  
  
    function fnFormatDetails(oTable, nTr) {
            sOut =
                    '&lt;div class="container pull-right span12" style="margin-right: 145px;"&gt;' +
                        '&lt;div class="detailTxn"&gt;' +
                            '&lt;table id="DetailTrans"&gt;' +
                                '&lt;thead&gt;' +
                                    '&lt;tr class="tableHeader"&gt;' +
                                        '&lt;th&gt; Date / Time&lt;/th&gt;' + // Hide the columns
                                        '&lt;th&gt;Details&lt;/th&gt;' +
                                    '&lt;/tr&gt;' +
                                '&lt;/thead&gt;' +
                                '&lt;tbody&gt;&lt;/tbody&gt;' +
                            '&lt;/table&gt;' +
                        '&lt;/div&gt;' +
                    '&lt;/div&gt;';
            return sOut;
  
  
  
  
  
  
  
            function getdate(userID) {
  
            $.getJSON("/user/" + $("#id").val() + "/jqgetuseraddress/" + userID, null, function (data) {
                $("#IPLoader").hide();
                oTable = $('#DetailTrans').dataTable({
                    "oLanguage": {
                        "sProcessing": "&lt;img src='~/Images/General/AjaxLoader.gif'&gt;"
                    },
                    "bProcessing": true,
                    "bserverSide": true,
                    "bFilter": false,
                    "bSort": false,
                    "bFilter": false,
                    "bPaginate": false,
                    "aaData": data.aaData,
                });
  
            });
  }
  </code></pre>
  
  <p>this seems to work for the first click, then we are presented with 
  "cannot reinitialise datatable" Which im kind of guessing this is due to it using the same ID for the datatable</p>
  
  <p>are we on the right path, or is there a correct way to do this?</p>