Multilevel Drilldown in Jquery Datatables

Jquery datatables is powerful plugin to create html tables with numerous features like sorting, pagination, editing, deleting etc. For more information refer the following link.
https://datatables.net/
Implementing single level drilldown on this plugin is quite straightforwards. But when it comes to multilevel drilldown it becomes more complex to make it work with paginations and multiple levels of drilldown within it. The normal jquery bind and live methods some times fail to work as expected. So I have used ‘on’ instead of the bind/live. To understand the usage of bind vs live vs on, please refer http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/. We also need to pass the element position while creating the drilldown tables. This will avoid the drilldown bug where in, it will not confuse between the element of two different level when opening and closing them.
So here is a working code of jquery datatable multilevel drilldown.

Datatable drilldown JSBin Example

The javascript works as follows.

var anOpen = [];
var anOpen1 = [];
$(document).ready(function () 
{  
	//We create the html string for the 2nd level and 3rd level tables. In this case 2nd level is same as 1st level<br />
	var itable = $('#example').html();
	var jtable = $('#example1').html();
	//Initialize the 1st level table
    var oTable = $('#example').dataTable({
        "bRetrieve": true,
        "bJQueryUI": true,
        "iDisplayLength": 5,
        "sPaginationType": "full_numbers",
        "sDom": '<"F"lfT>t<"F"p>'
    });
    $('#example').on("click", "td.control",function() 
	{
        var nTr = this.parentNode;
        var i = $.inArray(nTr, anOpen);
        if (i === -1) 
		{
			var iPos = oTable.fnGetPosition(nTr);
            $('img', this).attr('alt', "-");
            var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(itable, iPos), 'details');
            $('div.innerDetails', nDetailsRow).slideDown();
            anOpen.push(nTr);
			//Initialize 2nd level datatable
            var oInnerTable = $('#inner' + iPos).dataTable({
                "bRetrieve": true,
                "bJQueryUI": true,
                "iDisplayLength": 5,
                "sPaginationType": "full_numbers",
                "sDom": '<"F"lfT>t<"F"p>'
            });
            //2nd Level drilldown click function                                                   
            $('#inner' + iPos).on("click","td.control",function()
			{
                var nTr1 = this.parentNode;
                var j = $.inArray(nTr1, anOpen1);
                if (j === -1) 
				{
                    var jPos = oInnerTable.fnGetPosition(nTr1);
                    $('img', this).attr('alt', "-");
                    var nDetailsRow1 = oInnerTable.fnOpen(nTr1, fnFormatDetails1(jtable, iPos, jPos), 'details');
                    $('div.innerDetails', nDetailsRow1).slideDown();
                    anOpen1.push(nTr1);
					//initialize 3rd level table
                    var oInnerTable1 = $('#doubleinner' + iPos + '_' + jPos).dataTable({
                        "bRetrieve": true,
                        "bJQueryUI": true,
                        "iDisplayLength": 5,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"F"lfT>t<"F"p>'
                    });
                } 
				else 
				{
                    $('img', this).attr('alt', "+");
                    oInnerTable.fnClose(this.parentNode);
                    anOpen1.splice(j, 1);
                }
				event.stopPropagation();
            });
            //2nd Level Drilldown ends here           
        }
		else 
		{
            $('img', this).attr('alt', "+");
            oTable.fnClose(this.parentNode);
            anOpen.splice(i, 1);
			event.stopPropagation();
        }
    });
});
function fnFormatDetails(itable, pos) {
    var sOut = "<table id=\"inner" + pos + "\">";
    sOut += itable;
    sOut += "</table>";
    return sOut;
}

function fnFormatDetails1(jtable, pos1, pos2) {
    var sOut = "<table id=\"doubleinner" + pos1 + '_' + pos2 + "\">";
    sOut += jtable;
    sOut += "</table>";
    return sOut;
}