// 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();

  $(table).closest('td').css('display', 'none');

​

  // Do not change the row selector arrow to a "down arrow."

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

​

  subitemsRowData = row.data().items;

​

  // Packaging Editor

//   let subItemsEditor = new $.fn.dataTable.Editor({

//     ajax: {

//       type: "POST",

//       ajax: '/ajax/objects.txt',

//       data: function(d) {

//         d.item_id = subitemsRowData.id;

//       },

//     },

//     serverSide: true,

//     formOptions: {

//       main: {

//         onBlur: 'none',

//         onEsc: 'none'

//       }

//     },

//     fields: [{

//       type: 'hidden',

//       name: 'packaging.item_id',

//       default: function() {

//         return itemsRowData.id;

//       },

//     },

//              {

//                label: "Name:",

//                name: 'name'

//              },

//             ],

//              table: "#example",

//              }); // subItemsEditor

​

             // Initialize as a DataTable

             //let subItemsTable = $('#example').DataTable({

             let subItemsTable = $(table).DataTable({

             dom: "Bfrtip",

//              order: [

//              [1, 'asc'],

//     [2, 'asc'],

//     [3, 'asc'],

//     [4, 'asc'],

//     ],

    pageLength: 26,

//     ajax: {

//     type: "POST",

//     ajax: '/ajax/objects.txt',

//     data: function(d) {

//     d.parent = subitemsRowData.id;

//   },

//                                                  dataSrc: function(json) {

//     if (json.data.length > 0) {

//       $('#items_hierarchy_wrapper').css("display", "block");

​

​

//       // Display the child row

//       row.child(table).show();

​

//       // Do not change the row selector arrow to a "down arrow."

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

//     } else {

//       $("#items_hierarchy_wrapper").parent().css("display", "none");

//     }

​

//     return json.data;

//   },

// },

//   serverSide: true,

//     table: "#items_hierarchy",

//       columnDefs: [{

//         targets: "_all",

//         defaultContent: "",

//       }, ],

               data: [{'name': 'Tiger'}],

        columns: [{

          className: 'dt-control',

          orderable: false,

          searchable: false,

          data: null,

          defaultContent: '',

          width: '3%',

               title: ''

        },

                  {

                    title: 'Name',

                    data: 'name',

//                     render(data, type, row, meta) {

//                       switch (type) {

//                         case 'display':

//                           return row.items.item + (row.items.prefix == null ? '' : ', ' + row.items.prefix) + (row.items.suffix == null ? '' : ', ' + row.items.suffix);

​

//                           break;

​

//                         case 'sort':

//                         case 'type':

//                           return data;

​

//                           break;

​

//                         default:

//                           return data;

​

//                           break;

//                       }

//                     },

                    width: "25%"

                  },

                 ],

                  select: {

                  style: 'os',

                  selector: 'td:not(:first-child)'

                  },

                  language: {

                  select: {

                  rows: "<br>%d rows selected"

                  }

                  },

//                   buttons: [{

//                   className: 'subitemsAddButton create',

//                   editor: editor,

//                   extend: 'create',

//                   formTitle: "Add Item",

//                   text: 'Add Item'

//                   },

//                   {

//                   className: 'subitemsEditButton edit',

//                   editor: editor,

//                   extend: 'edit',

//                   formTitle: "Edit Item",

//                   text: 'Edit Item',

//                   attr: {

//                   'data-toggle': 'modal',

//                   'data-target': '#staticBackdrop',

//                   }

//                   },

//                   {

//                   className: 'subitemsDeleteButton remove',

//                   editor: editor,

//                   extend: 'remove',

//                   formTitle: "Delete Item",

//                   text: 'Delete Item'

//                   }

//                  ],

          paging: true,

            scrollCollapse: false,

              scrollX: false,

                rowCallback: function(row, data, index) {

                  $("td:empty", row).slice(1, 3).css('background-color', '#FEFFAB')

                },

​

                  // Initialisation complete callback, when table has fully been initialised, data loaded and drawn.

                  initComplete: function(settings, json) {

                    var api = this.api();

                    var count = api.rows().count();

                    if (count !== 0) {

                      $(table).closest('td').css('display', 'block');

                      api.columns.adjust();

                    }

​

//                     JsBarcode("#barcode").init();

​

//                     $('#items_hierarchy tbody').on('click', 'td.btn-image', function(event) {

//                       event.stopPropagation();

​

//                       let row = $(this).closest("tr");

//                       let barCode = row.find(".upc").text();

​

//                       let format;

​

//                       switch (barCode.length) {

//                         case 8:

//                           document.querySelector('.modal-title').innerHTML = "EAN-8";

//                           format = "ean8";

//                           break;

//                         case 12:

//                           document.querySelector('.modal-title').innerHTML = "UPC";

//                           format = "upc";

//                           break;

//                         case 13:

//                           document.querySelector('.modal-title').innerHTML = "EAN-13 (GTIN-13)";

//                           format = "ean13";

//                           break;

//                       }

​

//                       JsBarcode("#barcode", barCode, {

//                         font: "bold",

//                         format: format,

//                         margin: 0,

//                       });

//                     });

                  },

}) // subItemsTable

​

// Open and close item row detail information

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

  event.stopPropagation();

​

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

  let tableRow = subItemsTable.row(tr);

​

  if (tableRow.child.isShown()) {

    tr.removeClass('shown');

​

    // This row is already open; close it

    destroyChild(tableRow);

  } else {

    // Enumerate all rows

    subItemsTable.rows().every(function() {

      // If row has details expanded

      if (this.child.isShown()) {

        $(this.node()).removeClass('shown');

​

        // Collapse row details

        this.child.hide();

      }

    });

​

    tr.addClass('shown');

​

    // Open this row

    createPackagingTableChildRow(tableRow);

​

    var index = tableRow.index();

​

    // var tableRect = document.querySelector('#items').getBoundingClientRect(),

    //     packagingRect = document.querySelector('#packaging').getBoundingClientRect(),

    //     offset = packagingRect.bottom + packagingRect.height;

​

    var indexRow = $(subItemsTable.row(index).node());

    $('html body').animate({

      scrollTop: indexRow.offset().top

    });

​

    indexRow.addClass('selected');

    setTimeout(function() {

      indexRow.removeClass('selected');

    });

​

    // if (offset >= tableRect.bottom) {

    //     itemsTable.row(index - 5).scrollTo();

    // }

  }

});

​

// Adjust text on buttons depending on number of DataTable rows selected

subItemsTable.on('select.dt', function(e, dt, type, indexes) {

  e.stopPropagation();

​

  let table = $('#items_hierarchy').DataTable();

​

  // if (table.rows({

  //         selected: true

  //     }).count() > 1) {

  //     $(".itemsEditButton").text('Edit Items')

  //     $(".itemsDeleteButton").text('Delete Items')

  // } else {

  //     $(".itemsEditButton").text('Edit Item')

  //     $(".itemsDeleteButton").text('Delete Item')

  // }

})

​

// Adjust text on buttons depending on number of DataTable rows remaining selected after deselection

subItemsTable.on('deselect.dt', function(e, dt, type, indexes) {

  e.stopPropagation();

​

  let table = $('#items_hierarchy').DataTable();

​

  // if (table.rows({

  //         selected: true

  //     }).count() > 1) {

  //     $(".itemsEditButton").text('Edit Items')

  //     $(".itemsDeleteButton").text('Delete Items')

  // } else {

  //     $(".itemsEditButton").text('Edit Item')

  //     $(".itemsDeleteButton").text('Delete Item')

  // }

})

​

} // createsubItemsTableChildRow

​