在数据表中的DOM上发布对齐按钮

Question

Am使用Datatables在Dom上的表上显示一些数据。它工作正常，但我试图在顶部放置具有按钮，下拉页面选择列表和搜索框且未正确对齐的DOM。我正在使用Bootstrap4。我已使用此链接来对齐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的屏幕截图

Answer 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/