Php - Search Box, pagination disappear when data from MySQL has shown - php

Question

I have no clue anymore how I can solve this problem, components of Datatables have dissapeared : Searchbox, Pagination, number of length.
i thought it was caused by myself in the PHP code, but this is not the case.
there are many errors that are showing, id=example, error JSON response Second one AJAX error.
and now I found this, that is why I am asking my question now.
The code below shows just name but other components of the table are gone.
<table cellpadding="1" cellspacing="1" id="datatable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
require_once("Connection.php");
$connection = new Connection();
$conn = $connection->getConnection();
try{
$sql = "SELECT * FROM identitas";
$getData = $conn->prepare($sql);
$getData->execute();
$result = $getData->fetchAll(PDO::FETCH_ASSOC);
foreach($result as $data){
?>
<tr>
<td><?php echo $data['nama']?></td>
</tr>
<?php
}
}catch(PDOException $e){
echo "ERROR : " . $e->getMessage();
}
?>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Email</th>
</tr>
</tfoot>
</table>
how to call Datatables
<!-- for data table-->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.11/media/css/jquery.dataTables.css">
<script type="text/javascript" src="DataTables-1.10.11/media/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.11/media/js/jquery.dataTables.min.js"></script>
<!-- javascript-->
<script type="text/javascript">
$(document).ready(function(){
$('#datatable').dataTable({
"dom": '<"top"fl>rt<"bottom"ip><"clear">'
});
});
</script>