DataTables plugin doesn't work - php

Question

I've found this awesome plugin that sorts and filters and shows pagination etc. and I've tried it on a test empty page and it works. But when I put the same code on my project it doesn't. What is going on? The only difference I can see is that my app has PHP/Mysql data, but this plugin is supposed to work fine with both. :/
Links
<!-- BOOTSTRAP-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- DATATABLES-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
Table
<div class="row">
<?php
$prepIexec = $conn->prepare('SELECT id, nom, zona, tlf, email, gats, coordinador FROM TaulaCasesAcollida ORDER BY nom ASC');
$prepIexec->execute();
if($prepIexec->rowCount() > 0){ ?>
<div class="table-responsive">
<table id="taula_acollida" class='table taulaAco display' cellspacing="0" width="100%">
<thead>
<tr>
<th class="taulaAco_fila1 uppercase">Nom</th>
<th class="taulaAco_fila1 uppercase">Zona</th>
<th class="taulaAco_fila1 uppercase">Telèfon</th>
<th class="taulaAco_fila1 uppercase">Email</th>
<th class="taulaAco_fila1 uppercase">Gats</th>
<th class="taulaAco_fila1 uppercase">Coordinador</th>
</tr>
</thead>
<?php
while($row = $prepIexec->fetch(PDO::FETCH_ASSOC)){
extract($row);
?>
<tbody>
<tr>
<td class="taulaAco_fila2 capitalize"><?php echo $nom; ?></td>
<td class="taulaAco_fila2"><?php echo $zona; ?></td>
<td class="taulaAco_fila2"><?php echo $tlf; ?></td>
<td class="taulaAco_fila2"><?php echo $email; ?></td>
<td class="taulaAco_fila2 capitalize"><?php echo $gats; ?></td>
<td class="taulaAco_fila2 capitalize"><?php echo $coordinador; ?></td>
<td class="taulaAco_fila2 E">
<a title="editar" href="editar_casaAcollida.php?edit_id=<?php echo $row['id']; ?>" title="editar"><i class="material-icons iconoEditar">mode_edit</i></a>
<a class="X" title="eliminar" href="?eliminar_id=<?php echo $row['id']; ?>" onclick="return confirm('Estàs segur que vols el·liminar aquesta casa d'acollida?')"><i class="material-icons iconoEliminar">cancel</i></a>
</td>
</tr>
<?php
}
}
else{
?>
<div class="col-xs-12">
<div class="alert alert-warning">No hi ha cases d'acollida.</div>
</div>
<?php
}
?>
</tbody>
</table>
</div>
</div>
Script
<script>
$(document).ready(function() {
$('#taula_acollida').dataTable();
});
</script>

Answer 1

Put <tbody> outside the while loop
You have 6 columns in <thead> and 7 columns in <tbody>. This causes mData error.