DataTables.Net API datasource

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<input type="button" value="Click" id="btn1" />
<table width="100%" class="display" id="example" cellspacing="0">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
      <th>Start Date</th>
    </tr>
  </thead>
  <tbody></tbody> <!-- This is important -->
</table>

<p>
<table>
<tr>
  <td>JKB980LC00</td>
  <td>4</td>
  <td>100,000</td>
  <td>
    <table>
      <tr>
        <td></td>
        <td>NDB.N0000</td>
        <td>2</td>
        <td>50,000</td>
      </tr>
      <tr>
        <td></td>
         <td>JKH.N0000</td>
        <td>2</td>
        <td>50,000</td> 
      </tr>
    </table>
  </td>
</tr>
</table>
</p>

CSS

td.details-control {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

var table;
var table1;
var dataSet = [
    [ "Mahinda Rajapakse", "President", "Hambantota", "5421", "2005/01/25", "$320,800" ],
    [ "Maithripala Srisena", "President", "Puttalam", "8422", "2016/01/08", "$170,750" ],
    ];

$(document).ready(function() {
	
  //Alert Page is Loaded
  alert("Loaded");
  
  //Assign Button click
  $("#btn1").click(function() {
    $.ajax({
        url: 'https://api.myjson.com/bins/1sg6l',
        dataType: 'json',
        cache: false
      })
      .done(function(response) {
        table = $('#example').DataTable({});
        table.destroy();
        table = $('#example').DataTable({
          data: response.data,
          columns: [{
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
          }, {
            data: "name"
          }, {
            data: "position"
          }, {
            data: "salary"
          }, {
            data: "start_date"
          }]
        });
      })
      .fail(function() {
        alert("Ajax failed to fetch data");
      });
  });
  
  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function () {
        alert($.fn.DataTable.isDataTable('#example'));
        
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( formatX(row.data()) ).show();
            
            alert($.fn.DataTable.isDataTable('#detailTable'));
            table1 = $('#detailTable').DataTable({});
            table1.destroy();
            table1 = $('#detailTable').DataTable({
            	data:dataSet,
              columns: [
            		{ title: "Name" },
            		{ title: "Position" },
            		{ title:...