时间戳

首页 > 解决方案 > DataTables 插件不喜欢与 Bootstrap 4 结合使用

php - DataTables 插件不喜欢与 Bootstrap 4 结合使用

问题描述

所以，我正在为学校项目制作一个网站，其中需要包含一个可分类的用户系统。

当我制作它时，我认为使用数据表插件来简化这个过程会很好。但是当我将它与 Bootstrap 4 结合使用时，我的表格并没有伸展，而且我觉得 bootstrap CSS 并不能真正与它结合使用。

有谁知道如何让这 4 个一起工作以使其看起来更好？

这是该网站现在看起来多么丑陋：

我的标签页的 HTML / PHP：

<div class="container">
 <div class="row" id="content">

     <!-- Bovenste text van de site -->
     <div class="col-12">
         <p class="text-center" id="introtext">Hier ziet u een overzicht van alle contactpersonen.</p>
     </div>

     <table id="sortableTable" class="table table-hover">
         <thead>
         <tr>
             <td>Voornaam</td>
             <td>Achternaam</td>
             <td>Email</td>
             <td>Telefoonnummer</td>
             <td>Gebruikersnaam</td>
             <td>Type account</td>
         </tr>
         </thead>
         <tbody>
         <tr>
             <?php

             foreach ($row = mysqli_fetch_row(displayUsers("localhost", "root", "", "adresboek")) as $value
             {
                 echo "<td>{$value}</td>";
             }

             ?>
         </tr>
         </tbody>
     </table>
 </div> </div>

标签： phptwitter-bootstrapdatatablesbootstrap-4

解决方案

如提供的链接https://datatables.net/examples/styling/bootstrap4中所述。似乎您忘记包含 Datatables Bootstrap 4 JS/CSS 文件：JS：

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js

CSS：

https://cdnjs.cloudflare.com/ajax/libs/twitter- 
bootstrap/4.0.0/css/bootstrap.css
https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css

确保上述自定义 JS/CSS Datatables Bootstrap 4 包含在您的页面中。

推荐阅读