问题对齐数据表中 DOM 上的按钮答案

【问题标题】：Issue aligning buttons on the DOM in Datatables问题对齐数据表中 DOM 上的按钮
【发布时间】：2018-12-13 09:01:04
【问题描述】：

我正在使用 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 屏幕截图

【问题讨论】：

请发布您的尝试Minimal, Complete, and Verifiable example，注意预期输出
@IslamElshobokshy 适当地指出，添加了 DOM 的屏幕截图...试图使它们正确对齐
我不是要图片，请在 jsfiddle 之类的网站上重现您的问题

标签： jquery datatables dom-manipulation

【解决方案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/

【讨论】：