DataTables - Child rows

by Dorababu Meka

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="popover1" class="col-sm-12 col-xs-12 col-md-9">
  <div class="invisible" id="select-div">
    <div class="col-sm-2 " style="width:250px;">
      <input type="text" id="txtDynamic" />
    </div>

    <div class="clearfix col-sm-10" style="margin:8px 0;">
      <button type="button" class="btn btn-default btn-go">OK</button>
      <button type="button" class="btn btn-default btn-cancel-option">Cancel</button>
    </div>
  </div>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </tfoot>
</table>

CSS

td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/* Formatting function for row details - modify as you need */
function format(d) {
  // `d` is the original data object for the row
  return '<div class="slider">' +
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Full name:</td>' +
    '<td class="change-trigger">' + d.name + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Extension number:</td>' +
    '<td class="change-trigger">' + d.extn + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td class="change-trigger">Extra info:</td>' +
    '<td>And any further details here (images etc)...</td>' +
    '</tr>' +
    '</table>' +
    '</div>';
}

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
  var table = $('#example').DataTable({
    "ajax": 'https://api.myjson.com/bins/16lp6',
    scrollY: 250,
    deferRender: true,
    scroller: true,
    "columns": [{
        "class": 'details-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      },
      {
        "data": "name"
      },
      {
        "data": "position"
      },
      {
        "data": "office"
      },
      {
        "data": "salary"
      },
      {
        "data": "extn",
        "visible": false
      }

    ],
    "order": [
      [1, 'asc']
    ]
  });
  $("#example").on("click", 'tr td:not(:first-child)', function() {
    var pop = $(this).siblings(".change-trigger");
    $("#txtDynamic").val($(this).text());
    $('.change-trigger').not(this).popover('hide');
    $('.change-trigger').popover("show");
  });
  $('.change-trigger').popover({
    placement: 'Right',
    html: true,
    content: function() {
      var content = '';
      //clone() get updated #txtDynamic value
      //contents() omits the class="invisible" of #select-div
      //html() always gets default input value on popover
      content = $('#select-div').clone().contents();
      return content;
    }
  }).on('shown.bs.popover', function() {});
 ...