Проблема с выравниванием кнопок на DOM в таблицах данных

Я использую Datatables для отображения некоторых данных в таблицах на Dom. Он работает нормально, за исключением того, что вверху я пытаюсь разместить DOM, в котором есть список кнопки, выбор раскрывающейся страницы и поисковая строка, которые не выравниваются должным образом. Я использую Bootstrap 4. Я использовал эту ссылку для выравнивания DOM, но не работает: https://datatables.net/reference/option/dom

Мой код

 $(document).ready(function() {
            $('#dataTable').DataTable({
                lengthChange: true,
                buttons: [ 'copy', 'excel', 'pdf'],
                dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            });
        });

Снимок экрана DOM на моем компьютере при использовании приведенного выше кода Проблема с выравниванием кнопок на DOM в таблицах данных

Пожалуйста, опубликуйте Минимальный, полный и проверяемый пример вашей попытки, отметив ожидаемый результат

— 13.12.2018 10:03

@IslamElshobokshy Должным образом отмечено, добавили снимок экрана DOM ... пытаясь заставить их правильно выровняться

— 13.12.2018 10:19

Я не прошу изображения, пожалуйста, воссоздайте вашу проблему на таком веб-сайте, как jsfiddle.

— 13.12.2018 10:19

jquery datatables dom-manipulation

13.12.2018 10:01

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

724

Ответы 1

Вы можете разместить соответствующие элементы в панели начальной загрузки.

$(document).ready(function() {
var table = $('#example').DataTable({
    "dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });

Демо: http://jsfiddle.net/a62hqqf9/

17.04.2019 15:15