// Formatting function for row details - modify as you need

function format(d) {

    // `d` is the original data object for the row

    return (

        '<dl>' +

        '<dt>Full name:</dt>' +

        '<dd>' +

        d.name +

        '</dd>' +

        '<dt>Extension number:</dt>' +

        '<dd>' +

        d.extn +

        '</dd>' +

        '<dt>Extra info:</dt>' +

        '<dd>And any further details here (images etc)...</dd>' +

        '</dl>'

    );

}

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

    ajax: '/ajax/objects.txt',

  select: true,

    columns: [

        {

            className: 'dt-control',

            orderable: false,

            data: null,

            defaultContent: ''

        },

        { data: 'name' },

        { data: 'position' },

        { data: 'office' },

        { data: 'salary' }

    ],

    order: [[1, 'asc']]

});

// Add event listener for opening and closing details

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

  e.stopPropagation();

​

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

    var row = table.row(tr);

    if (row.child.isShown()) {

        // This row is already open - close it

        row.child.hide();

    }

    else {

        // Open this row

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

    }

});

​

$('#example').on('select.dt', function(e, dt, type, indexes) {

  e.stopPropagation();

                createsubItemsTableChildRow(dt);

});

​

function createsubItemsTableChildRow(row) {

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

  let table = $('<table id="items_hierarchy" class="hover order-column stripe" width="100%"/>');

​

  // Display the child row

  row.child(table).show();

  $(row.node()).removeClass('dt-hasChild')

​

  subitemsRowData = row.data().items;

}

​