php - DataTables 插件不起作用

Question

我发现了这个很棒的插件，它可以排序、过滤和显示分页等。我已经在测试空白页面上尝试过它，它可以工作。但是当我将相同的代码放在我的项目中时，它不会。到底是怎么回事？我能看到的唯一区别是我的应用程序有 PHP/Mysql 数据，但这个插件应该可以在两者上正常工作。 :/

链接

<!-- 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>外面while循环
2. 您在 <thead> 中有 6 列和 <tbody> 中的 7 列.这导致 mData错误。