How to add buttons in a DataTables using loop - php

Question

Problem: I would like to ask on how do I add a buttons together with the data inside in the while loop,
I tried adding a html variable and put the buttons there so it would loop but DataTables is giving me an error.
This is the error every time i reload page
DataTables warning: table id=tbl_manageStudents - Requested unknown parameter '4' for row 0, column 4.
and I'm pretty sure that it gives that error since it cannot loop the buttons inside the while loop and DataTables needs to have th and td, equally.
manageUsers.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$databaseName = "db_researchrepository";
$conn = new mysqli($servername, $username, $password, $databaseName);
$sql = "SELECT * FROM tbl_students ORDER BY ( 0 + student_id ) ASC";
$result = $conn->query($sql);
$output = array('data' => array());
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$studentNumberId = htmlentities($row["student_id"]);
$studentName = htmlentities($row["student_name"]);
$studentEmail = htmlentities($row["student_email"]);
$studentYrBlock = htmlentities($row["student_yrblock"]);
$output['data'][] = array(
$studentNumberId,
$studentName,
$studentEmail,
$studentYrBlock
);
$html = '
<td>
<input type="submit" name="viewStudents" id="viewStudents" value="View" class="btn btn-info"
data-toggle="modal" data-target="#viewExistingStudents<?php echo $row["ID"];?>">
<input type="submit" name="deleteRecord" id="deleteRecord" value="Delete" class="btn btn-danger"
data-toggle="modal" data-target="#deleteSelectedStudent<?php echo $row["ID"];?>">
</td>
';
}
}
echo json_encode($output);
$conn->close();
?>
This is the code that I used to fetch the data and display it in the DataTable.
<script type="text/javascript">
$(document).ready(function(){
function getData(){
$('#tbl_manageStudents').DataTable( {
'processing':true,
'destroy':true,
'order': [],
'ajax': {
url: "helper/helper_tblManageStudent.php",//path to your server file
type: 'POST'
},
lengthChange: true,
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
]
});
}
getData();
})
</script>
this is my table
<div class="container-sm table-responsive" id="tblManageStudent">
<table class="table table-striped table-hover table-condense" id="tbl_manageStudents">
<thead>
<tr>
<th scope="col">Student ID</th>
<th scope="col">Student Name</th>
<th scope="col">Student Email</th>
<th scope="col">Student Year and Block</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
This is the visual structure of my DataTable/Table. There should be a buttons there