how to deal with datatable-ajax cannot be displayed using server-side - json

Question

i am trying to display data on my database in laravel using datatable-ajax with server-side but the data i fetched is not displayed in the table
I've tried the json data on the url and it works but it can't appear on datatable-ajax
json
this is the script i'm trying to build using ajax
`
function getData(first_reload) {
var id = <?= $customer->id ?>;
/** Remove */
if ($.fn.DataTable.isDataTable('#datatable-ajax')) {
$('#datatable-ajax').DataTable().destroy();
}
$('#datatable-ajax tbody').empty();
$('#datatable-ajax tfoot th').each(function(index, value) {
var title = $(this).text();
if (index != 0) // id and action
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var table = $('#datatable-ajax').DataTable({
processing: true,
serverSide: true,
ajax: `{{ url('/') }}/customer/show-datatable/${id}`,
order: [
[3, "desc"]
], //or asc
columns: [{
data: 'id',
name: 'id'
},
{
data: 'no_resi',
name: 'no_resi'
},
{
data: 'total_fee',
name: 'total_fee'
},
{
data: 'date',
name: 'date'
},
{
data: 'bayar',
render: function(data, type, row) {
var paid = false;
$.each(row.statuses, function(key, val) {
if (val.id == 5)
paid = true;
});
if (paid) {
return '<span class="text-success">Sudah</span>';
} else {
return '<span class="text-danger">Belum</span>';
// <i class="la la-check"></i>
}
}
},
{
data: 'sampai',
render: function(data, type, row) {
var paid = false;
$.each(row.statuses, function(key, val) {
if (val.id == 4)
paid = true;
});
if (paid) {
return '<span class="text-success">Sudah</span>';
} else {
return '<span class="text-danger">Belum</span>';
// <i class="la la-check"></i>
}
}
},
{
data: 'ambil',
render: function(data, type, row) {
var paid = false;
$.each(row.statuses, function(key, val) {
if (val.id == 7)
paid = true;
});
if (paid) {
return '<span class="text-success">Sudah</span>';
} else {
return '<span class="text-danger">Belum</span>';
// <i class="la la-check"></i>
}
}
},
],
fixedHeader: true,
scrollX: true,
initComplete: function() {
// Apply the search
this.api().columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change clear', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
});
}
`
this is a view of my problematic table
page