DataTables-Plugin funktioniert nicht

Question

Ich habe dieses tolle Plugin gefunden, sortiert und filtert und zeigt Paginierung usw. und ich habe es auf einer leeren Testseite ausprobiert und es funktioniert. Aber wenn ich den gleichen Code auf mein Projekt setze, tut es das nicht. Was ist los? Der einzige Unterschied, den ich sehen kann, ist, dass meine App PHP/Mysql-Daten hat, aber dieses Plugin soll mit beiden gut funktionieren. :/

Verbindungen

<!-- 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> 

Tabelle

<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

1. Put <tbody> außerhalb der while Schleife
2. Sie haben 6 Spalten in <thead> und 7 Spalten in <tbody>. Dies verursacht mData Fehler.