I want to populate a DataTable using the jQuery ajax but I keep bumping into a TypeError: Cannot read properties of undefined (reading ‘length’).
For context, I am using the Hope UI datatable template for this.
Here’s the HTML code for the table:
<div class="table-responsive">
<table id="boards_table" class="table table-striped" data-toggle="data-table">
<thead>
<tr>
<th>Model</th>
<th>Serial</th>
<th>Revision</th>
<th>Owner</th>
<th>Date Owned</th>
<th>Updates</th>
<th>Notes</th>
<th>Date Added</th>
<th>Status</th>
<th>History</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Model</th>
<th>Serial Number</th>
<th>Revision</th>
<th>Owner</th>
<th>Date Owned</th>
<th>Updates</th>
<th>Notes</th>
<th>Date Added</th>
<th>Status</th>
<th>History</th>
</tr>
</tfoot>
</table>
</div>
This is the script I use for the Ajax call:
$(document).ready(function() {
var table = window.DataTable = $('#boards_table').DataTable({
"order": [],
"bootstrap": true,
"bAutoWidth": true,
"responsive": true,
"processing": true,
"serverSide": true,
"aLengthMenu": [
[25, 50, 75],
[25, 50, 75]
],
"pageLength": 25,
"ajax": {
url: "boards-ajax.php",
type: "POST",
"data": {
GetBoards: "Yes",
},
error: function(xhr, textStatus, errorThrown) {
var error = textStatus;
var details = errorThrown;
console.log(xhr.responseText);
console.log("Status=" + xhr.status + "nStatusText=" + xhr.statusText + "nError=" + error + "&Detail=" + details)
}
},
"dom": 'Bfrtip',
"buttons": [{
extend: 'excelHtml5',
className: 'btn btn-link btn-soft-light',
exportOptions: {
columns: [2, 3, 4],
}
}],
"initComplete": function(settings, json) {
table.buttons().container().appendTo($('#boards_table_wrapper .col-sm-6:eq(0)'));
},
});
$("#global_search").on('keyup', function() {
table
.search(this.value)
.draw();
});
});
And this is the PHP script the gets the data from the database:
if (isset($_POST['GetBoards'])) {
if ($InventoryCon->connect_errno) {
header('HTTP/1.1 503 Service Unavailable');
exit();
} else {
$Query = "Select * From boards Where IsDeleted=0;";
$AllRecords = array();
$Result = mysqli_query($InventoryCon, $Query);
if (!mysqli_query($InventoryCon, $Query)) {
header('HTTP/1.1 500 Internal Server Error');
throw new ErrorException($InventoryCon->error, 500);
exit();
} else {
while ($Row = mysqli_fetch_assoc($Result)) {
$RowArray = array();
$RowArray[] = $Row['ModelName'];
$RowArray[] = $Row['SerialNumber'];
$RowArray[] = $Row['RevisionNumber'];
$RowArray[] = 'Owner';
$RowArray[] = $Row['DateOwned'];
$RowArray[] = $Row['Updates'];
// Notes icon
$RowArray[] = 'Note Column';
$RowArray[] = $Row['DateAdded'];
//Status button
$RowArray[] = 'Status Column';
// History button
$RowArray[] = 'History Column';
$AllRecords[] = $RowArray;
}
$output = array(
"draw" => 25,
"recordsTotal" => mysqli_num_rows($Result),
"recordsFiltered" => 25,
"data" => $AllRecords
);
echo json_encode($output );
}
mysqli_close($InventoryCon);
}
}
The Ajax call returns 200 OK and if I add a success function, I can see that the data is also returned as it should.
I scoured the internet to see what solutions other people found, but none did the trick.