JSON data displayed but table not drawn (using Datables - server side processing) - php

Question

I am using Yajra's DataTables server side processing. I can see the JSON data but the table is not being populated.
I managed to get DataTables working with client side processing, but as I will eventually have > 50,000 rows of data, I decided to try and implement server side processing by downloading Yajra's DataTables for Laravel 5.8.
When I call my route, I see the data in a JSON format, but I am not seeing the table at all. It says "draw: 0", so I guess there is an issue with drawing the table?
I have tried various solutions mentioned on stack overflow and the official DataTables website, however none seem to work for me. E.g.
- DataTables json is not processed (in Laravel)
- jQuery Datatables - Table not populated for Ajax response
- https://datatables.net/forums/discussion/45444/populate-table-body-with-ajax
The JSON data that I see when I call my route is as follows:
{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"customerNr": "98764",
"orderNr": "23478",
"pallet_id": "66788",
"status_id": "2",
"created_by": "Sara",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-09 07:23:20"
},
{
"id": "2",
"customerNr": "99999",
"orderNr": "22222",
"pallet_id": "22335",
"status_id": "1",
"created_by": "Sophie",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-04 08:26:28"
},
{
"id": "3",
"customerNr": "54657",
"orderNr": "89856",
"pallet_id": "11228",
"status_id": "1",
"created_by": "Markus",
"created_at": "08 Jul 2019",
"updated_at": "2019-07-08 06:59:42"
},
],
"input": []
}
Here are the relevant files from my Laravel project:
web.php:
Route::get('returned-shipment', ['uses'=>'ReturnedShipmentController#index', 'as'=>'returned-shipment.index']);
ReturnedShipmentController:
public function index(
{
return DataTables::of(ReturnedShipment::all())->make();
}
index.blade.php:
<div class="row">
<div id="tbl" class="col-sm-12">
<table id="overview" class="cell-border display">
<thead class="tbl-top">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
</tr>
</thead>
<tfoot class="tbl-bottom">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function () {
var startingStatus = 'angelegt';
var table = $('#overview').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{ route('returned-shipment.index') }}",
"columns": [
{data: 'id'},
{data: 'orderNr'},
{data: 'created_at'},
{data: 'status_id'}
],
"search": {
"search": "angelegt"
},
"dom": "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
"paging": true,
"info": true,
"searching": true,
"autoWidth": true,
"language": {
"paginate": {
"previous": "Vorherige Seite",
"next": "Nächste Seite"
},
"search": "Suche:",
"info": "Zeige _START_ - _END_ von insgesamt _TOTAL_ Einträgen",
"lengthMenu": 'Einträge pro Seite' + '<br>' +
'<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">' +
'<option selected value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'<option value="-1">Alle</option>' +
'</select>'
},
initComplete: function () {
/**
* Drop-down filter is created for the 4th column "status" in the header and populates it with
* the different status values
*/
this.api().columns([3]).every(function () {
var column = this;
var select = $('<select><option value="">alle</option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
/**
* When clicking on drop-down next to status, the sorting function is not activated
*/
$(select).click(function (e) {
e.stopPropagation();
});
/**
* Once an option in the drop-down next to status has been selected, you can read the text in
* the drop-down
*/
column.data().unique().sort().each(function (d, j) {
if (startingStatus === d) {
select.append('<option SELECTED value="' + d + '">' + d + '</option>')
} else {
select.append('<option value="' + d + '">' + d + '</option>')
}
});
/**
* When drop-down is clicked on, search field is cleared. Otherwise search field must be
* manually cleared before using the drop-down.
*/
$(select).on('click', function () {
table.search(" ").draw();
});
});
}
});
});
</script>
I am expecting to see the table being populated with the data.
If I need to provide any more code or explain something further, please don't hesitate to ask. I am quite new to Laravel and DataTables, so I would greatly appreciate your help.
Thanks in advance! :)

Answer 1

I have checked your current code and checked your JSON. Your JSON file seems to be invalid.
{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"customerNr": "98764",
"orderNr": "23478",
"pallet_id": "66788",
"status_id": "2",
"created_by": "Sara",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-09 07:23:20"
},
{
"id": "2",
"customerNr": "99999",
"orderNr": "22222",
"pallet_id": "22335",
"status_id": "1",
"created_by": "Sophie",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-04 08:26:28"
},
{
"id": "3",
"customerNr": "54657",
"orderNr": "89856",
"pallet_id": "11228",
"status_id": "1",
"created_by": "Markus",
"created_at": "08 Jul 2019",
"updated_at": "2019-07-08 06:59:42"
}
],
"input": []
}
This is the correct format. The comma after the last object in your data array needs to be removed. Can you confirm this solves your issue? I got datatables working without this comma.