$(document).ready(function() {

function createChild ( row ) {

    // This is the table we'll convert into a DataTable

    var table = $('<table class="display" width="100%"/>');

    // Display it the child row

    row.child( table ).show();

    // Initialise as a DataTable

    var adjlinesTable = table.DataTable( {

    ajax: "/ajax/objects.txt",

    pageLength: 5,

    columns: [

      { data: "name" },

      { data: "position" },

      { data: "office" }

    ],

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

    } );

}

  // Main table

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

    ajax: "/ajax/objects.txt",

    pageLength: 5,

    columns: [

      {

         className: 'details-control',

         orderable: false,

         data: null,

         defaultContent: ''

      },

      { data: "office" },

​

    ],

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

  } );

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

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

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

     var row = table.row( tr );

     var rowData = row.data();

     var adjustmentID = row.data.id;

     if ( row.child.isShown() ) {

       // This row is already open - close it

       row.child.hide();

       tr.removeClass('shown');

       // Destroy the Child Datatable

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

     }

     else {

       // Open this row

        createChild(row);

       tr.addClass('shown');

      }

  } );

​

} );