Bootstrap dataTable没有在php表中排序和搜索

Question

I'm a site that has one controller page to run the mysql query. It outputs the results to a viewer page named m_analitica.php, with include("header.php") at top and include("footer") at the bottom.

code for m_analitica.php :

<div>
<table class="table table-striped table-bordered table-hover" id="myTable">
    <div><h2>Mapa Analítica</h2></div>
    <thead>
        <tr>
            <th>Name</th>
            <th>Tipo Documento</th>
            <th>Número</th>
            <th>Cliente</th>
            <th>Obra</th>
            <th>Designação</th>
            <th>Agregado</th>
            <th>Quantidade (ton)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Tipo Documento</th>
            <th>Número</th>
            <th>Cliente</th>
            <th>Obra</th>
            <th>Designação</th>
            <th>Agregado</th>
            <th>Quantidade (ton)</th>
        </tr>
    </tfoot>


    <?php foreach ($positions as $position): ?>
        <tbody>
            <tr>
                <td><?= $position["data"] ?></td>
                <td><?= $position["tipo"] ?></td>
                <td><?= $position["num"] ?></td>
                <td><?= $position["cliente"] ?></td>
                <td><?= $position["obra"] ?></td>
                <td><?= $position["nome_obra"] ?></td>
                <td><?= $position["agr"] ?></td>
                <td><?= $position["ton"] ?></td>
            </tr>
        </tbody>
    <?php endforeach ?>
</table>

In the head of header.php I included the following js scripts and CSS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="../public/js/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" />
<link href="../public/css/bootstrap.min.css" rel="stylesheet"/>
<script src="../public/js/bootstrap.min.js"></script>
<script src="../public/js/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="../public/js/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>

Then before body element closure in footer.php I inserted the script:

<script type="text/javascript">
    $('#myTable').dataTable();
</script>

I get the formatting right, except it does not divide the table into pages, and the search and sorting are not working, it does nothing by clicking them.

Does the bootstrap dataTable not work with php? Or with foreach loops? Or his there something wrong with the code.

Answer 1

Remove the <tbody> tags from inside your loop. You only want to repeat the <tr> tags. Put the <tbody> tags outside of the loop.