我正在使用数据表，我想在中间的导出按钮左侧显示页面长度选项，在表格顶部右侧的搜索/字段以及分页上方的表格底部显示页面长度选项。
我的问题是，当我添加功能以显示导出按钮时，它们根本不显示，如果我使用 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 中来实现。并在需要时使用“class-name”添加类名。
使用 CSS grid是分隔前 3 个控件(页面长度、按钮、筛选框)的简单方法。
对于页 footer 分，我只是将过滤器框放在它自己的 div 中。
如果以上不是您想要的，您可以重新排列 DOM 元素以满足您的需要。您可以通过调整 CSS 来微调结果。
关于JQuery DataTables - 显示页面长度选项以及导出按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66150228/