Реализация Bootstrap 4 DataTables - PullRequest
Новая
       11

Реализация Bootstrap 4 DataTables

0 голосов
/ 03 ноября 2019

Я пытаюсь реализовать загрузчик данных с датой 4 и не могу заставить его работать. В моей голове у меня есть требуемый CSS 

    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">

. Затем у меня есть следующие обязательные сценарии: 

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

Затем я вызываю сценарии в моей стандартной отформатированной HTML-таблице с правильнымИдентификатор выглядит следующим образом: 

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

Ничего из этого Однако не работает, и таблица отображается с использованием обычной таблицы начальной загрузки 4, без функции поиска / сортировки. Может ли кто-нибудь объяснить, что я делаю здесь не так?

Спасибо

РЕДАКТИРОВАТЬ: я пытался это сделать, к сожалению, это нарушило CSS для всего сайта. Все, что я действительно хочу сделать, - это показать только первые 10 строк моей таблицы начальной загрузки 4, но каждый раз, когда я запускаю Google, появляются результаты для таблиц данных. Есть ли способ показать только первые 10 строк стандартной таблицы начальной загрузки 4?

1 Ответ

3 голосов
/ 03 ноября 2019

Похоже, вы не импортировали Jquery в свой HTML-файл. вам нужно использовать 3 файла для таблиц данных следующим образом 

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js

Но вы только добавили 

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

Импорт JQuery до

jquery.dataTables.min.js и
dataTables.bootstrap4.min.js

после импорта файлов js и jquery напишите свой код Jquery 

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

и заголовок 

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

проверьте, как следует, это будет работать нормально.

...