Jquery-Ajax not populating dataTables table

Question

am working on a script that uses Bootstrap, dataTables and Ajax. The aim is to allow the user to click on the menu tabs and produce a table of data. The issue I am havinng is the script is not displaying the returned ata in the #table.

The script checks to see if the dataTables has been initialised when a Tab is clicked, if the table has been initialised it performs a distroy() and the table is initialised for the next Tab click. If I don't use distroy() then the script throws an error.

I have checked that the AJAX call is returning the correct data in the correct format and it is.

Can anyone see why the #table is not populating with the returned data.

HTML TABS

<div class="TabButtonDiv">
  <ul class="nav nav-tabs"  id="myTab">
    <?php if(!empty($Route1)){ ?>
    <li class="nav-item"> <a href="#route_1" role="tab" id="<?php echo $Route1;?>" data-toggle="tab"><?php echo $Route1 . " - ". $Ter1;?></a> </li>
    <?php } ?>
    <?php if(!empty($Route2)){ ?>
    <li class="nav-item"> <a href="#route_2" role="tab" id="<?php echo $Route2;?>" data-toggle="tab"><?php echo $Route2 . " - ". $Ter2;?></a> </li>
    <?php } ?>
  </ul>
</div>    

HTML TABBED TABLE

 <div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active in" id="tabs">
    <table name="timeline" border="1" cellpadding="0" cellspacing="0" class="table table-striped"  id="table" width="100%" data-role="datatable"   data-info="false">
     <thead>
        <tr>
          <th>No</th>
          <th>Ter</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody class="CurrentBooking-rows">
      </tbody>
    </table>
  </div>
</div>

JQUERY/dataTable/AJAX

    $(document).ready(function() {
  $('#myTab a').on('shown.bs.tab', function(event) {
    var target = $(event.target).attr("href");
    //var target2 = $(event.target2).attr("table");
    
    var tableName = $('#Route').attr('name');
    console.log("TAB ", target);
    console.log("TABLE 1 ", tableName);
    if ($(tableName).find('#Route').hasClass('table')) {
      console.log("TABLE 2 ", tableName);
      $(tableName).find('#Route').DataTable().destroy();
    }
    // Initialize DataTable for the current tab
        table = $('#Route').DataTable( {
        createdRow: function(row, data, dataIndex) {
            $('td:eq(0)', row).css('padding-left', '2px');
            $('td:eq(1)', row).css('padding-right', '2px');
        },
        responsive: true,
        autoWidth: false,
        retrieve: false,
        paging: false,
        searching: false,
        //bInfo : false,
        scrollY: "550px",
        scrollCollapse: true,
        ajax: {
    "type": "POST",
    "data":{Code:target},
    dataType: 'JSON',
            url: 'get_h_times.php',
            dataSrc: '',
        },
        language: {
            "emptyTable": "There are no times for " + target + ""
        },
        columnDefs: [{

                "orderable": false
            },
            {
                "width": "10%",
                "targets": 0
            },
            {
                "width": "10%",
                "targets": 1
            },
            {
                "width": "10%",
                "targets": 2
            },
            {
                //"targets": [5,6,7],
                "className": "text-center"
            },

        ],
        columns: [{
                data: 'RecordID',
                "visible": false
            },
            {
                data: "No",
                width: '10%'
            },
            {
                data: "Ter",
                width: '10%'
            },
            {
                data: "Time",
                width: '33%'
            },

        ],
        //rowCallback: function(row, data, index){ 

        //}

        "initComplete": function(settings, json) {
            $('body').find('.dataTables_scrollBody').addClass("scrollbar");

        },

    });

});