Datatable with 2d array

by nutchyleo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<body>
<table id="AvailableTB" class="table table-striped table-bordered table-hover dataTables-example" style="width: auto; height: auto; table-layout: fixed;">
                            <thead>
                                <tr style="background-color:#cf4a70;color:white">
                                    <th id="cmdcol">   </th>
                                    <th id="startdateint">วันที่เริ่มสัมภาษณ์</th>
                                    <th id="enddateint">เวลาที่เริ่มสัมภาษณ์</th>
                                    <th id="starttimeint">วันที่ปิดสัมภาษณ์</th>
                                    <th id="endtimeint">เวลาที่ปิดสัมภาษณ์</th>
                                    <th id="empid">รหัสพนักงาน</th>
                                    <th id="pos">ตำแหน่งงาน</th>
                                    <th id="posgroup">กลุ่มงาน</th>
                                    <th id="line">สายงาน</th>
                                </tr>
                            </thead>
                        </table>
</body>

CSS

body {
  background: #white;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(function(){

var res = {
  "status": "sample string 1",
  "message": "sample string 2",
  "examScheduleInterviews": [
    {
      "examScheduleId": 1,
      "examStartDate": "sample string 2",
      "examEndDate": "sample string 3",
      "examStartTime": "sample string 4",
      "examEndTime": "sample string 5",
      "examinerId": 6,
      "positionId": 1,
      "positionName": "sample string 7",
      "positionGroupId": 1,
      "positionGroupName": "sample string 8",
      "positionLineId": 1,
      "positionLineName": "sample string 9",
      "examineeInterviews": [
        {
          "examineeId": 1,
          "userId": 2,
          "employeeId": 3,
          "employeeName": "sample string 4",
          "employeeSurname": "sample string 5",
          "employeeEmail": "sample string 6",
          "employeeTitle": "sample string 7"
        },
        {
          "examineeId": 1,
          "userId": 2,
          "employeeId": 3,
          "employeeName": "sample string 4",
          "employeeSurname": "sample string 5",
          "employeeEmail": "sample string 6",
          "employeeTitle": "sample string 7"
        }
      ]
    },
    {
      "examScheduleId": 1,
      "examStartDate": "sample string 2",
      "examEndDate": "sample string 3",
      "examStartTime": "sample string 4",
      "examEndTime": "sample string 5",
      "examinerId": 6,
      "positionId": 1,
      "positionName": "sample string 7",
      "positionGroupId": 1,
      "positionGroupName": "sample string 8",
      "positionLineId": 1,
      "positionLineName": "sample string 9",
      "examineeInterviews": [
        {
          "examineeId": 1,
          "userId": 2,
          "employeeId": 3,
          "employeeName": "sample string 4",
          "employeeSurname": "sample string 5",
          "employeeEmail": "sample string 6",
          "employeeTitle": "sample string 7"
        },
        {
          "examineeId": 1,
          "userId": 2,
          "employeeId": 3,
         ...