Bootstrap 4 数据表 Javascript 库 2019答案

【问题标题】：Bootstrap 4 datatable Javascript libaries 2019Bootstrap 4 数据表 Javascript 库 2019
【发布时间】：2019-10-06 03:29:07
【问题描述】：

我在 bootstrap 4 中创建了一个表，并使用 php/sql 在我的网站中填充了来自 myphpadmin 数据库的数据。但是，我希望使用 javascript 库来实现搜索、分页、下一页等。

我已经尝试了许多脚本和 css 库，但它们似乎都没有工作，所以我开始认为我的编码可能存在问题。如下图所示：

<!--stylesheets-->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel ="sylesheet" type ="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

<link href="https://fonts.googleapis.com/css?family=Dosis:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<link rel="stylesheet" href="images/font-awesome.css" >
<link rel = "stylesheet" href="style.css">


<!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script type ="text/javascript" src ="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type ="text/javascript" src ="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

</head>

<body>

<!-- main body of webpage that will contain table of patients-->

<div class='container mt-5 pt-5'>
            <table class="table table-striped table-bordered patientsTable" style="width: 100%">
                <thead>
                    <tr>
                        <th scope="col">First Name</th>
                        <th scope="col">Surname</th>
                        <th scope="col">DOB</th>
                        <th scope="col">Address</th>
                        <th scope="col">Town</th>
                        <th scope="col">Postcode</th>
                    </tr>
                </thead>

<?php

    while($row = $result ->fetch_assoc()){
        $rowid = $row['id'];
        $firstname = $row['firstname'];
        $surname = $row ['surname'];
        $dob = $row['dob'];
        $address = $row['address'];
        $town = $row['town'];
        $postcode = $row['postcode'];


        echo"
            <tbody>
                <tr>
                    <td>$firstname</td>
                    <td>$surname </td>
                    <td>$dob</td>
                    <td>$address</td>
                    <td>$town</td>
                    <td>$postcode</td>
                    <td><a class = 'btn btn-danger' href ='patientsmedication.php?editid=$rowid'>View</a></td>
                </tr>";

    }
?>
            </tbody>
        </table>
    </div>

    <script>
    $(document).ready( function () {
        $('.patientsTable').DataTable();
    } );
    </script>

我正在寻找要实现的搜索栏和其他功能，但目前它只是一个包含数据库信息的普通表。任何帮助将不胜感激，因为我花了半天时间研究这个小问题。

【问题讨论】：

标签： php mysql datatables bootstrap-4

【解决方案1】：

首先，您似乎在代码中加载了两次 jQuery。您应该从下面删除任何一个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

此外，您应该避免多次使用 tbody，并将 tbody 保持在循环之外，如下代码所示：

<?php
    echo '<tbody>';
    while($row = $result ->fetch_assoc()){
        $rowid = $row['id'];
        $firstname = $row['firstname'];
        $surname = $row ['surname'];
        $dob = $row['dob'];
        $address = $row['address'];
        $town = $row['town'];
        $postcode = $row['postcode'];


        echo"
                <tr>
                    <td>$firstname</td>
                    <td>$surname </td>
                    <td>$dob</td>
                    <td>$address</td>
                    <td>$town</td>
                    <td>$postcode</td>
                    <td><a class = 'btn btn-danger' href ='patientsmedication.php?editid=$rowid'>View</a></td>
                </tr>";

    }
?>
</tbody>

此外，您的表 thead 中有 6 列，但您在 tbody 中填充了 7 列，这将破坏您的 HTML 代码和 jQuery。您要么需要在 thead 中提供 7 列，要么需要从 tbody 中删除 1 列。

希望对你有帮助！！

【讨论】：

感谢您的快速响应和花时间回答，但我实施了上述所有更改，但仍然没有应用所需的更改
你可以为此构建一个 jsfiddle 或者如果有任何错误显示控制台吗？？
它现在正在工作，谢谢。我有一个带有 ajax 的 onclick 功能，当点击表格时会出现，但我需要再次点击按钮，搜索栏等才会出现。我知道这是一个不同的问题，所以我不期待答案，这是我会研究的。再次感谢您的帮助