Codeigniter Submit Ajax Result Via Button to Datatable Not Working - php

Question

I'm currently using Codeigniter and using Ajax to post my search result through the server and result the result and display on my responsive datatable. However the result was not added into my datatable and i even try to add it with .append but it just added below my table and the search function on datatable is not searching it and it still show "No data available in table".
Here are my View :
<div id="reporting" class="container">
<h3 class="section-title">Export Time Location Panel</h3>
<form id = "search">
<div class="form-group">
<div class="form-group">
<h5>Date/ Time</h5>
<input type="datetime-local" name="datetime" id = "datetime">
<?php echo form_error('datetime'); ?>
</div>
</div>
<button type="submit" class="btn btn-primary">Confirm</button>
</form><br/>
<table class="table table-bordered table-light" >
<thead>
<tr>
<td class="id">ID</td>
<td class="na">NA Name</td>
<td class="centre">Centre Name</td>
<td class="login">Date & Time</td>
<td class="lat">Latitude</td>
<td class="long">Longtitude</td>
<td class="accuracy">Accuracy</td>
<td class="place">Location Name</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<?php include('footer.php'); ?>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var tbl = $('.table').DataTable({
responsive: true,
"order": [[0, "desc"]]
})
$( "#search" ).submit(function(event) {
event.preventDefault();
var value = $("#datetime").val();
$.ajax({
type:'POST',
url:'<?php echo base_url(); ?>location/search_record',
data:{'datetime':value},
success:function(data){
$('.table').append(data);
}
});
});
} );
</script>
Here are my Model :
public function search_record(){ //Display Record at View Page
$this->load->model('location_model');
$this->load->library('form_validation');
echo '
<tr>
<td class="id">ID</td>
<td class="na">NA Name</td>
<td class="centre">Centre Name</td>
<td class="login">Date & Time</td>
<td class="lat">Latitude</td>
<td class="long">Longtitude</td>
<td class="accuracy">Accuracy</td>
<td class="place">Location Name</td>
</tr>
';
}

Answer 1

You have to add data to table body by
success:function(data){ tbl.rows.add($(data)).draw(); }
Please check this link
https://jsfiddle.net/kuLcqwav/3/
https://datatables.net/examples/api/add_row.html