JQuery pagination not working with AJAX script - html

Question

Im using the Jquery for pagination of my data tables and it is working great. However, when i add some AJAX script to load data without page refresh, the pagination function is not working anymore. Can anyone point out my mistake? my code is as below:
My table:
<table id="data-table" class="table table-striped border " style="width:100%">
<thead>
<tr>
<th>No</th>
<th>License Plate</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach($bg_records as $bg_record)
#if($bg_record -> status == 1)
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> PASS</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#else
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> FAILED</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
My AJAX script to load the table without page refresh
<script type="text/javascript">
var delay = 1000;
var refreshId = setInterval(function () {
$('#data-table').load(' #data-table');
}, delay);
</script>
JQuery pagination script
<script>
$(document).ready(function () {
$('#data-table').DataTable();
});
</script>