JQuery DataTables - 显示页面长度选项以及导出按钮 [英] JQuery DataTables - showing Page Length option as well as Export Buttons
问题描述
我正在使用数据表，我想在中心的左侧导出按钮和表格顶部右侧的搜索/字段以及分页上方的表格底部显示页面长度选项.
我的问题是，当我添加功能以显示导出按钮时，它们根本不显示，如果我使用 dom:Bfrtip";那么页面长度选项将被删除.
我正在使用 DataTable 的以下 JS:
$("#member_list").DataTable({scrollY: "800px",//如果我们现在想显示垂直滚动条，请删除它scrollX: !0,//如果我们现在想显示水平滚动条，请删除它stateSave: !0,//用于保存页面刷新时当前Pagination的State语: {分页:{以前的:<i class='mdi mdi-chevron-left'>"，下一个:<i class='mdi mdi-chevron-right'>>}},绘制回调:函数(){$(.dataTables_paginate > .pagination").addClass(分页四舍五入")},列定义:[{可订购:假，target: [2,3,4,5]//这里我们禁用了几个cols的排序恐惧}],纽扣: [复制"、csv"、excel"、pdf"、打印"]});我使用以下 HTML 表格结构:<
table id="member_list";类=表"class="table table-striped dt-responsive nowrap w-100"><头><tr><th></th><th data-toggle=true">Action</th><th>M代码</th><th>M Name</th><th>MM分支</th><th>MM代码</th><th>会员名称</th><th>移动</th><th>DOB</th><th data-hide=手机、平板电脑">M注册日期</th><th data-hide=手机、平板电脑">M费用</th></tr></thead><tbody id="tbody"></tbody>这里 TBody 是使用 Ajax 附加的.请帮忙解决这个问题.
我按照安德鲁的建议进行了更改，现在我在中间/中心获得了按钮.
但是按钮都粘在一起了，它们之间没有任何间距.
这个问题的任何解决方案都会很棒.
TIA
您可以使用
这是通过使用 <...> 将相关的 DataTable 元素包装在它们自己的 div 中并在需要的地方使用class-name"添加类名来实现的.
使用 CSS grid 是一种将前 3 个控件(页面长度、按钮、过滤器框)隔开的简单方法.
对于页脚部分，我只是将过滤器框放在自己的 div 中.
如果上述内容不是您想要的，您可以重新排列 DOM 元素以满足您的需要.并且您可以通过调整 CSS 来微调结果.
I am using DataTables and I want to show Page Length option on the Left side Export Buttons in the Center and Search/Field on the Right side at the top of the table as well as at the bottom of the table above Pagination.
My problem is that when I add feature to show Export buttons they do not show at all and if I use dom: "Bfrtip" then the Page Length option is getting removed.
I am using following JS of DataTable:
$("#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'
]
});
I am using following HTML Table structure: <
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>
Here TBody is appended using Ajax. Please help solve this problem.
I made changes as per Andrew's suggestion and now I am getting the buttons in the middle/center.
But the buttons are coming up all stuck to each other without any spacing between them.
Any solution for this problem would be great.
TIA
You can use the dom option for this, with help from some CSS.
The CSS, which I added to my test page <head>, in a <style> section:
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;
}
The dom option is this:
$('#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' ]
} );
The end result is:
This works by wrapping the relevant DataTable elements in their own divs, using <...> and also adding class names, where needed, using "class-name".
Using a CSS grid is a simple way to space out the top 3 controls (page length, buttons, filter box).
For the footer section, I just place the filterbox in its own div.
You can re-arrange the DOM elements to fit your needs, if the above is not exactly what you want. And you can fine-tune the results by adjusting the CSS.
这篇关于JQuery DataTables - 显示页面长度选项以及导出按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
