Using AJAX to insert data but Datatable shows no result - php

Question

I want to use AJAX to load data from database and display it using DataTable. The database is loaded and can be seen, but the Datatable shows:
Showing 0 to 0 of 0 entries (filtered from NaN total entries)
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Department</td>
<td>Job Title</td>
<td>Employee Type</td>
<td>Employee Status</td>
</tr>
</thead>
</table>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#employee_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"searching" : true,
"ajax" : {
url: 'employeeData.php',
type: "post",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
"columns": [
{ "data": "eId"},
{ "data": "eName"},
{ "data": "eDepartment"},
{ "data": "eJobTitle"},
{ "data": "eEmployeeType"},
{ "data": "eEmployeeStatus"}
]
} );
});
</script>
employeeData.php
$query ="
SELECT *
FROM employee
ORDER BY employeeID DESC";
$result = mysqli_query($link, $query);
$data = array();
while($row=mysqli_fetch_array($result))
{
$data['data'][] = array(
'eId' => $row['employeeId'],
'eName' => $row['employeeLastName'],
'eDepartment' => $row['department'],
'eJobTitle' => $row['jobTitle'],
'eEmployeeType' => $row['employeeType'],
'eEmployeeStatus' => $row['employeeStatus']
);
}
echo json_encode($data);