Плагин DataTables не очень нравится в сочетании с Bootstrap 4 - PullRequest
Новая
       11

Плагин DataTables не очень нравится в сочетании с Bootstrap 4

0 голосов
/ 27 апреля 2018

Итак, я делаю сайт для школьных проектов, который должен включать в себя сортируемую пользовательскую систему.

Когда я делал это, я думал, что было бы неплохо использовать плагин datatables, чтобы сделать этот процесс намного проще. Но когда я использовал его в сочетании с Bootstrap 4, моя таблица не растягивалась, и я чувствую, что 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>

1 Ответ

0 голосов
/ 29 апреля 2018

Как указано в предоставленной ссылке 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.

...