问题描述
我正在使用数据表,我想在中心的左侧导出按钮和表格顶部右侧的搜索/字段以及分页上方的表格底部显示页面长度选项。
我的问题是,当我添加功能以显示导出按钮时,它们根本不显示,如果我使用 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 来微调结果。