JQuery DataTables - 显示页面长度选项以及导出按钮
我正在使用 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 附加的。请帮助解决这个问题。
我根据安德鲁的建议进行了更改，现在按钮位于中间/中心。
但按钮全部粘在一起，之间没有任何间距。
对于这个问题的任何解决方案都会很棒。
TIA
您可以dom在一些 CSS 的帮助下使用该选项。
我添加到测试页的 CSS<head>部分<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 中，使用<...>并在需要时使用“类名”添加类名来实现的。
使用 CSSgrid是分隔前 3 个控件（页面长度、按钮、过滤器框）的简单方法。
对于页脚部分，我只是将过滤器框放置在其自己的 div 中。
如果上面的内容不完全是您想要的，您可以重新排列 DOM 元素以满足您的需求。您可以通过调整 CSS 来微调结果。
| 归档时间： |
|
| 查看次数： |
3603 次 |
| 最近记录： |