Bootstrap dataTable 不在 php 表中排序和搜索

Question

我是一个有一个控制器页面来运行 mysql 查询的站点。它将结果输出到名为m_analitica.php 的查看器页面，include("header.php") 在顶部，include("footer") 在底部。

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>

在header.php的head中，我包含了以下js脚本和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>

然后在 footer.php 的 body 元素关闭之前我插入了脚本：

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

我得到了正确的格式，除了它没有将表格分成页面，搜索和排序不起作用，点击它们什么都不做。

bootstrap dataTable 不能与 php 一起使用吗？还是使用 foreach 循环？或者他的代码有问题。

Answer 1

从循环中删除<tbody> 标签。您只想重复 <tr> 标签。将<tbody> 标签放在循环之外。