JQuery DataTables - 显示页面长度选项以及导出按钮

如何解决JQuery DataTables - 显示页面长度选项以及导出按钮

我正在使用数据表，我想在中心的左侧导出按钮和表格顶部右侧的搜索/字段以及分页上方的表格底部显示页面长度选项。

我的问题是，当我添加功能以显示导出按钮时，它们根本不显示，如果我使用 dom:"Bfrtip" 那么页面长度选项将被删除。

我正在使用 DataTable 的以下 JS：

$("#member_list").DataTable({
    scrollY: "800px",//Remove this if we do Now want to show Verticle Scroll Bar
    scrollX: !0,//Remove this if we do Now want to show Horizontal Scroll Bar
    stateSave: !0,//Use to save State of current Pagination when page is refreshed
    language: {
        paginate: {
            prevIoUs: "<i class='mdi mdi-chevron-left'>",next: "<i class='mdi mdi-chevron-right'>"
        }
    },drawCallback: function() {
        $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
    },columnDefs: [{
        orderable: false,targets: [2,3,4,5]  //Here we disable sorting fearure for few cols
    }],buttons: [
        'copy','csv','excel','pdf','print'
    ]
});

我使用以下 HTML 表格结构：

table id="member_list" class="table" class="table table-striped dt-responsive Nowrap w-100">
<thead>
  <tr>
    <th></th>
    <th data-toggle="true">Action</th>
    <th>M Code</th>
    <th>M Name</th>
    <th>MM Branch</th>
    <th>MM Code</th>
    <th>Member Name</th>
    <th>Mobile</th>
    <th>dob</th>
    <th data-hide="phone,tablet">M Reg Date</th>
    <th data-hide="phone,tablet">M Fees</th>
  </tr>
</thead>
<tbody id="tbody">

</tbody>
</table>

这里 TBody 是使用 Ajax 附加的。请帮助解决这个问题。

我按照 Andrew 的建议进行了更改，现在我将按钮置于中间/中心。

但是按钮都粘在一起了，它们之间没有任何间距。

这个问题的任何解决方案都会很棒。

TIA

解决方法

在一些 CSS 的帮助下，您可以使用 dom 选项。

我添加到测试页 <head> 中的 CSS，位于 <style> 部分：

div.dt-top-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

div.dt-center-in-div {
  margin: 0 auto;
}

div.dt-filter-spacer {
  margin: 10px 0;
}

dom 选项是这样的：

$('#example').DataTable( {
  dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<"dt-filter-spacer"f><ip>',buttons: [ 'copy','csv','excel','pdf','print' ]
} );

最终结果是：

这是通过使用 <...> 将相关 DataTable 元素包装在它们自己的 div 中并在需要时使用“class-name”添加类名来实现的。

使用 CSS grid 是一种将前 3 个控件（页面长度、按钮、过滤器框）隔开的简单方法。

对于页脚部分，我只是将过滤器框放在自己的 div 中。

如果上述内容不是您想要的，您可以重新排列 DOM 元素以满足您的需要。您可以通过调整 CSS 来微调结果。