DataTable и Bootstrap 4.2.1 форматирование Показать записи и поиск

Question

Не удается отобразить формат, как в примере на веб-сайте DataTables .

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    
<link href="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.css"/>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/jquery.dataTables.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.js"></script>

$(function($) {
  $('#myTbl').DataTable();
});

Вот мой результат.

Я хочу, чтобы это выглядело так.

Answer 1

Похоже, что-то прикрутило <label> элементный стиль к чему-то вроде {width: 50px; display: block}.Возможно, вам придется проверить, могут ли ваши таблицы стилей, загруженные после dataTables.bootstrap4.min.css, переопределять стиль <label> или, возможно, вы сделали что-то вроде $('label').css({'width': '50px'; 'display': 'block'}) в своем коде.

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

Answer 2

может понадобиться дом

пример:

$('#myTbl').DataTable({dom: "<'row gridheader'<'col-sm-12 col-md-12'B>>"
    + "<'row'<'col-sm-12'tr>>"
    + "<'row gridfooter'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"});