DataTables - Child rows

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>
<div style="background-color: yellow; text-align:center;">
  <b>example1</b> one ajax, extn value greater than 5000, this row load
</div>
<table id="example1" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </thead>
</table>

<div style="background-color: yellow; text-align:center;">
   <b>example2</b> one ajax, extn value is 5000 or less, this row load
</div>
<table id="example2" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </thead>
</table>

JavaScript

$(document).ready(function() {
  /* if extn >= 5000 */
  $('#example1').DataTable({
    "ajax": 'https://api.myjson.com/bins/16lp6',
    "columns": [{
        "data": "name"
      },
      {
        "data": "position"
      },
      {
        "data": "office"
      },
      {
        "data": "salary"
      },
      {
        "data": "extn"
      }

    ],
    order: [
      [4, "desc"]
    ]
  });
  /* if extn < 5000 */
  $('#example2').DataTable({
    "ajax": 'https://api.myjson.com/bins/16lp6',
    "columns": [{
        "data": "name"
      },
      {
        "data": "position"
      },
      {
        "data": "office"
      },
      {
        "data": "salary"
      },
      {
        "data": "extn"
      }
    ],
    order: [
      [4, "desc"]
    ]
  });
});