Jquery Nested DataTables : Help needed in Understanding the code I found on Internet

[ankita sarma]

Hello Fellow Programmers,

Please Help me with this problem

Problem statement : I am working on jquery datatables. I am getting json data from an AJAX request and making the table in jquery and call dataTable on that.

I am not posting the actual code but trying to explain what I have already done

this is the code I have written in Jsp

<div>
<table id="myTable">
<thead>
<th>Header1</th>
</thead>
<tbody id="myTbody">
</tbody>
</table>
</div>

$.ajax({
url : /mypage/mepage.html,
"first param":param1
"second param ": param2
success: function(data){
for(int i=0;i<data.myList.length;i++)
{
var row = "<tr>"
col="<td>"+data.MyList.myFirstdata.appendTo(row); //this may be a wrong syntax. But Here I am trying to append my data to column of the table and append that column to the row
row.appendTo(myTbody) // then I append row to the Tbody of the table which I have defined on a JSP.

}

myTable.Datatable(); //here this function calls datatable on the table that has been declared in jsp.
})

now I have a requirement that on expansion of each row I want another datatable to be displayed on another ajax call.

I found this example on the internet but couldnot find out how can I adjust this according to my requirement.

the code on the internet is as follows

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<table id="exampleTable">
    <thead> 
        <tr>
            <th>Year</th>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
         <tr>
      <td>2012</td>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>March</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>April</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>May</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>June</td>
      <td>$180</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>July</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>August</td>
      <td>$230</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>September</td>
      <td>$40</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>October</td>
      <td>$16</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>November</td>
      <td>$590</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>December</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2013</td>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2013</td>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2013</td>
      <td>March</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>2013</td>
      <td>April</td>
      <td>$80</td>
    </tr>
    </tbody>
</table>

function fnFormatDetails(table_id, html) {
    var sOut = "<table id=\"exampleTable_" + table_id + "\">";
    sOut += html;
    sOut += "</table>";
    return sOut;
}



var iTableCounter = 1;
    var oTable;
    var oInnerTable;
    var TableHtml;

    //Run On HTML Build
    $(document).ready(function () {
        TableHtml = $("#exampleTable").html();


        //Insert a 'details' column to the table
        var nCloneTh = document.createElement('th');
        var nCloneTd = document.createElement('td');
        nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
        nCloneTd.className = "center";

        $('#exampleTable thead tr').each(function () {
            this.insertBefore(nCloneTh, this.childNodes[0]);
        });

        $('#exampleTable tbody tr').each(function () {
            this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
        });

        //Initialse DataTables, with no sorting on the 'details' column
        var oTable = $('#exampleTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumnDefs": [
            { "bSortable": false, "aTargets": [0] }
        ],
            "aaSorting": [[1, 'asc']]
        });

        /* Add event listener for opening and closing details
        * Note that the indicator for showing which row is open is not controlled by DataTables,
        * rather it is done here
        */
        $('#exampleTable tbody td img').live('click', function () {
            var nTr = $(this).parents('tr')[0];
            if (oTable.fnIsOpen(nTr)) {
                /* This row is already open - close it */
                this.src = "http://i.imgur.com/SD7Dz.png";
                oTable.fnClose(nTr);
            }
            else {
                /* Open this row */
                this.src = "http://i.imgur.com/d4ICC.png";
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
                oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers"
                });
                iTableCounter = iTableCounter + 1;
            }
        });


    });

I couldnot understand how each row is being captured and how a new table is being formed?? It would be great if somebody could explain me.

JSFIDDLE :Jsfiddle for nested datatable