title: how to extend drill down table to third level in data tables?
body: <p>I referred the following code and successfully obtained drill down table to two levels in data tables.</p>
  
  <p><a href="https://jsfiddle.net/karlnicholas/2gc3r7vv/" rel="nofollow noreferrer">https://jsfiddle.net/karlnicholas/2gc3r7vv/</a>
  <a href="https://i.stack.imgur.com/mhjIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mhjIw.png" alt="enter image description here"></a></p>
  
  <p>now I want to obtain drill down table upto 3rd level, so i tried to extend the code in by adding details control button to the child row. please look into following code</p>
  
  <pre><code>  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;   
  &lt;title&gt;Datatable drilldown Example&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"&gt;
  &lt;script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"&gt; &lt;/script&gt;
  
  &lt;style&gt;
  
  td.details-control {
      background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
      cursor: pointer;
  }
  tr.shown td.details-control {
      background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
  }
  
  td.details-control1 {
      background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
      cursor: pointer;
  }
  tr.shown td.details-control1 {
      background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center;
  }
  
  &lt;/style&gt;
  
  &lt;script&gt;
  
  var opinions = [{"id":47,"name":"E061140","fileName":null,"disposition":null,"summary":null,"title":"Marr. of Eustice","opinionDate":"2015-12-10"},{"id":48,"name":"C070296M","fileName":null,"disposition":null,"summary":null,"title":"P. v. Nilsson","opinionDate":"2015-12-10"},{"id":50,"name":"S209643","fileName":null,"disposition":null,"summary":null,"title":"P. v. Stevens","opinionDate":"2015-12-10"}];
  var sections = [{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"177.5"},"refCount":2,"section":{"part":"Chapter","partNumber":"4","title":"Incidental Powers and Duties of Judicial Officers","codeRange":{"sNumber":{"position":168,"sectionNumber":"177"},"eNumber":{"position":171,"sectionNumber":"179"}},"depth":3}},{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"580"},"refCount":16,"section":{"part":"Chapter","partNumber":"1","title":"Judgment in General","codeRange":{"sNumber":{"position":862,"sectionNumber":"577"},"eNumber":{"position":879,"sectionNumber":"582.5"}},"depth":3}}];
  
  function format ( table_id ) {
      return '&lt;table class="table table-striped" id="opiniondt_'+table_id+'"&gt;'+
      '&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;References&lt;/th&gt;&lt;th&gt;Section&lt;/th&gt;&lt;th&gt;Statute Titles&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;'+
      '&lt;tr&gt;'+
      '&lt;td id="table2"&gt;&lt;/td&gt;'+
        '&lt;td&gt;Full name:&lt;/td&gt;'+
        '&lt;td&gt;Extension number:&lt;/td&gt;'+
        '&lt;td&gt;Extra info:&lt;/td&gt;'+
      '&lt;/tr&gt;'+
      '&lt;tr&gt;'+
      '&lt;td id="table2"&gt;&lt;/td&gt;'+
        '&lt;td&gt;Full name:&lt;/td&gt;'+
        '&lt;td&gt;Extension number:&lt;/td&gt;'+
        '&lt;td&gt;Extra info:&lt;/td&gt;'+
      '&lt;/tr&gt;'+
      '&lt;/table&gt;';
    }
  var iTableCounter=1;
  var oInnerTable;
  
  $(document).ready(function() {
      TableHtml = $('#opiniondt').html();
  
      var table = $('#opiniondt').DataTable( {
        paging:    false,
        searching: false, 
        info:      false, 
        rowId: 'id', 
        data: opinions, 
        columns:[ 
          {   className:      'details-control',
              orderable:      false,
              data:           null,
              defaultContent: '' },
          { data:'opinionDate'},
          { data:'title'}, 
          { data:'name'}
        ],
        order: [[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
       */
       $('#opiniondt tbody').on('click', 'td.details-control', function () {
           var tr = $(this).closest('tr');
           var row = table.row( tr );   
  
           if ( row.child.isShown() ) {
               //  This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
           }
           else {
              // Open this row
              row.child( format(iTableCounter) ).show();
              tr.addClass('shown');
              // try datatable stuff
              oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({
                  data: sections, 
                  autoWidth: true, 
                  deferRender: true, 
                  info: false, 
                  lengthChange: false, 
                  ordering: false, 
                  paging: false, 
                  scrollX: false, 
                  scrollY: false, 
                  searching: false, 
                  columns:[ 
                  {   className:'details-control1',
  
                      orderable:      false,
                      data:           null,
                      defaultContent: '' },
                     { data:'refCount' },
                     { data:'section.codeRange.sNumber.sectionNumber' }, 
                     { data:'section.title' }
                   ]
              });
              iTableCounter = iTableCounter + 1;
          }
       });
  
      $('.2nddrill').click(function(){
          console.log("class");
      });
  
      $('. details-control1').click(function(){
          console.log("details-control1");
      });
  
      $('.even').click(function(){
  
      console.log("even");
      });
  
      $('.odd').click(function(){
  
      console.log("odd");
      })
  
      });
  
  
  &lt;/script&gt;
  
  &lt;table class="table table-striped table-bordered" id="opiniondt"&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;Title&lt;/th&gt;&lt;th&gt;Document&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  </code></pre>
  
  <p>I m having trouble in fetching onclick event for child row click. I thought as the details_control1 has same class name i could use it for onclick, but it dint work out. Help me with this problem, thank you in advance. </p>