var childEditors = {};  // Globally track created chid editors

$(document).ready(function() {

  var object2 = [

    {

      name: 'name1',

      position: 'position1',

      extn: 'extn1'

    },

    {

      name: 'name2',

      position: 'position2',

      extn: 'extn2'

    },

    {

      name: 'name3',

      position: 'position3',

      extn: 'extn3'

    },

  ]

  // Return table with id generated from row's name field

  function format(rowData) {

    return '<table id="' + rowData.name.replace(' ', '-') + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+

           '</table>';  

    }

  // Main table

  var table = $('#example').DataTable( {

    ajax: "/ajax/objects.txt",

    pageLength: 5,

    columns: [

      {

         className: 'details-control',

         orderable: false,

         data: null,

         defaultContent: ''

      },

      { data: "name" },

      { data: "position" },

      { data: "office" },

      { data: "salary" }

    ],

    order: [[1, 'asc']],

  } );

  // Add event listener for opening and closing first level childdetails

  $('#example tbody').on('click', 'td.details-control', function () {

     var tr = $(this).closest('tr');

     var row = table.row( tr );

     var rowData = row.data();

     if ( row.child.isShown() ) {

       // This row is already open - close it

       row.child.hide();

       tr.removeClass('shown');

       // Destroy the Child Datatable

       $('#' + rowData.name.replace(' ', '-')).DataTable().destroy();

     }

     else {

       // Open this row

       row.child(format(rowData)).show();

       var id = rowData.name.replace(' ', '-');

​

        $('#' + id).DataTable({

          dom: "t",

          data: object2,

          columns: [

            { data: "name", title: 'Name' },

            { data: "position", title: 'Position' },

            { data: "extn", title: 'Extension' },

          ],

          scrollY: '100px',

          select: true,

        });

        tr.addClass('shown');

      }

  } );

​

} );