Ajax loaded row details

Ajax loaded row details

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<table width="100%" String class="display" String id="example" String cellspacing="0" String>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

CSS

body {
margin : 20px;  
}

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

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

tr.loading td.details-control {
 background :rgba(0, 0, 0, 0) url('http://i.imgur.com/mtfdoXy.gif') no-repeat scroll center center;
}

JavaScript

var jsonDetails = {"html":"Details for <b>Ashton Cox<\/b><br><br>Full information could be derived from a database and potentially complex interactions such as charts, DataTables or other controls could be shown if required. In this demo only this summary is returned."}

var jsonStaff =   {
    "data": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        {
            "name": "Garrett Winters",
            "position": "Accountant",
            "salary": "$170,750",
            "start_date": "2011\/07\/25",
            "office": "Tokyo",
            "extn": "8422"
        },
        {
            "name": "Ashton Cox",
            "position": "Junior Technical Author",
            "salary": "$86,000",
            "start_date": "2009\/01\/12",
            "office": "San Francisco",
            "extn": "1562"
        },
        {
            "name": "Cedric Kelly",
            "position": "Senior Javascript Developer",
            "salary": "$433,060",
            "start_date": "2012\/03\/29",
            "office": "Edinburgh",
            "extn": "6224"
        },
        {
            "name": "Airi Satou",
            "position": "Accountant",
            "salary": "$162,700",
            "start_date": "2008\/11\/28",
            "office": "Tokyo",
            "extn": "5407"
        },
        {
            "name": "Brielle Williamson",
            "position": "Integration Specialist",
            "salary": "$372,000",
            "start_date": "2012\/12\/02",
            "office": "New York",
            "extn": "4804"
        },
        {
            "name": "Herrod Chandler",
            "position": "Sales Assistant",
            "salary": "$137,500",
            "start_date": "2012\/08\/06",
            "office": "San Francisco",
            "extn": "9608"
        },
  ...