When i make a normal table(without php code) it shows the datatable with all functions. But when i use php to load in my database i see the datatable, but without all functions.
What am i doing wrong? Just used the basic javascript code from the datatables website.
<!DOCTYPE html>
<html>
<head>
<title>Overzicht Exportzendingen</title>
<meta charset="utf-8">
<title>Exportzendingen</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Exportzendingen</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Overzicht</a></li>
</ul>
<a href="invoer.html" class="btn btn-default" >Zending Toevoegen</a>
</div>
</nav>
<div class="container-fluid">
<table id="table_id" class="display table table-bordered">
<thead>
<tr>
<th width="2%">ID</th>
<th width="6%">Debiteur</th>
<th width="10%">Klantnaam</th>
<th width="3%">Aantal Pallets</th>
<th width="3%">Totaal Gewicht</th>
<th width="30%">PB Nummers</th>
<th>Edit</th>
</thead>
<tbody>
<!-- Fetch from db -->
<!-- Connect to db-->>
<?php
$conn = mysqli_connect("localhost","root","","export") or die("Error in Connection");
$query = mysqli_query($conn, "SELECT exportid, deb_nmr, cost_name, numb_pal, tot_weight, pb_s FROM export_tabel");
while ($result = mysqli_fetch_array($query)) {
echo "<tr>
<td>".$result['exportid']."</td>
<td>".$result['deb_nmr']."</td>
<td>".$result['cost_name']."</td>
<td>".$result['numb_pal']."</td>
<td>".$result['tot_weight']."</td>
<td>".$result['pb_s']."</td>
</tr>";
}
?>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('#table_id').DataTable();
});
</script>
</body>
</html>
your table header has an extra column than rest of the table, so its causing errors and you could have seen the error in the JavaScript console,
remove that extra column from table header or add suitable information in the rest of the rows, this should solve your problems