DataTablesプラグインが動作しません

Question

この素晴らしいプラグインは、並べ替え、フィルタリング、ページ設定などを示しています。空のページで試してみました。しかし、私がプロジェクトに同じコードを書いても、それはしません。何が起こっている？私が見ることができる唯一の違いは、私のアプリはPHP/MySQLのデータを持っているが、このプラグインは両方とも正常に動作するはずです。 ：whileループの外側/

リンク

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

表

<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> 
     $(document).ready(function() { 
      $('#taula_acollida').dataTable(); 
     }); 
    </script> 

Answer 1

1. 入れ<tbody>
2. <thead>に6列、<tbody>に7列あります。これにより、mDataエラーが発生します。