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

$(document).ready(function() {

  // Generate table ID

  function getTableId(level, uniqueData) {

    // level = child level.

    // uniqueData - unique data value in table.

    return level + '-' + uniqueData.replace(' ', '-'); // Replace sapces with dashes

  }

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

  function format(rowData, tableId) {

    // rowData - data for the table.

    // tableId - unique table ID for child table.

    // This function just builds the table tag.

    return '<table id="' + tableId + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+

           '</table>';  

  }

​

​

  // Main table

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

    ajax: "/ajax/objects.txt",

    pageLength: 5,

    dom: 'Plfrtip',

    columns: [

      {

         className: 'details-control main-table',

         orderable: false,

         data: null,

         defaultContent: ''

      },

      { data: "name" },

      { data: "position" },

      { data: "office" },

      { data: "salary" }

    ],

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

  });

  // Add event listener for for main talbe to open and close first level child details

  $('#example tbody').on('click', 'td.main-table', 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 {

       var id = getTableId("1", rowData.name);

       $('#' + id).on('xhr.dt', function(event) {

         event.stopPropagation();

       });

       // Open this row

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

​

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

          dom: "t",

          ajax: "/ajax/objects.txt",

          columns: [

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

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

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

          ],

          scrollY: '100px',

          select: true,

       });

       tr.addClass('shown');

    }

  });

});