3-level drill down datatable

by hedgy123

HTML

<!doctype html>

<head>
  <meta charset="utf-8">
   <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <!--Data Table-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>

   <link rel="stylesheet" type="text/css"  href=" https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css"/>

   <script type="text/javascript"  src=" https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
   <script type="text/javascript"  src=" https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>

    <!-- Bootstrap-->
   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


 
</head>

<body>
               <div class="table-responsive">
                 <!-- table table-striped dataTable  -->
                   <table id="example" class="table table-striped">
                     <thead><tr></tr></thead>
                  </table>
            </div> <!-- class=col-8-->    
            
            </body>

CSS

td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function setupData() {
                      

              function format_level1 ( d,table_id ) {


               var columns_level1 = [];
               columns_level1[0] = ({"className":'details-control',"data":null,"defaultContent":''});
               columns_level1[1] = ({data:'a_level1',title:'a_level1'});

               data_level1 = [{'a_level1':'2'},{'a_level1':'3'}];

                 return {thetable: '<table class="table table-striped" id="example_'+table_id+'">'+
                    '<thead><tr></tr></thead>'+
                    '</table>',
                     thecolumns: columns_level1,
                     thedata: data_level1};

                }; //format_level1


              function format_level2 ( d,table_id ) {


               var columns_level2 = [];
               columns_level2[0] = ({"className":'details-control',"data":null,"defaultContent":''});
               columns_level2[1] = ({data:'a_level2',title:'a_level2'});

               data_level2 = [{'a_level2':'4'},{'a_level2':'5'}];

               return {thelev2table: '<table class="table table-striped" id="example_lev2_'+table_id+'">'+
                    '<thead><tr></tr></thead>'+
                    '</table>',
                     thelev2columns: columns_level2,
                     thelev2data: data_level2};

                }; //format_level2
 ///////
               var iTableCounter=1;
               var iTableCounterLev2=1;
               var oInnerTable;

               var columns_level0 = [];
               columns_level0[0] = ({"className":'details-control',"data":null,"defaultContent":''});
               columns_level0[1] = ({data:'a_level0',title:'a_level0'});

               data_level0 = [{'a_level0':'0'},{'a_level0':'1'}];
               console.log(data_level0);

               var table = $('#example').DataTable({
                   "bAutoWidth":false,
                   "pagingType": "full_numbers",
                   "paging": true,
                  ...