jQuery DataTables-显示“页面长度"选项以及“导出"按钮 [英] JQuery DataTables - showing Page Length option as well as Export Buttons
问题描述
我正在使用DataTables，我想在页面顶部以及分页上方表格底部的中心左侧的导出"按钮和右侧的搜索/字段"中显示页面长度"选项.
我的问题是，当我添加功能以显示导出"按钮时，它们根本不会显示，如果我使用dom:那么页面长度"选项将被删除.
我正在使用下面的DataTable JS:
$(#member_list").DataTable({scrollY:"800px"，//如果我们现在想显示Verticle滚动条，请删除此scrollX:！0，//如果我们现在想显示水平滚动条，请删除此stateSave:！0，//用于刷新页面时保存当前分页状态语: {分页:{以前的:< i class ='mdi mdi-chevron-left'>"，下一个:< i class ='mdi mdi-chevron-right'>"}}，drawCallback:function(){$(.dataTables_paginate> .pagination").addClass("pagination-rounded")}，columnDefs:[{可订购:假，目标:[2,3,4,5]//在此禁用对几个cols的排序恐惧}]，纽扣: ['copy'，'csv'，'excel'，'pdf'，'print']}); 我正在使用以下HTML表结构:<
table id =" member_list"class ="table"class ="table table-striped dt-response nowrap w-100".< thead>< tr>< th</th>< th data-toggle ="true">动作</th>< M代码</th>< M>名称</th>< th> MM分支</th>< th> MM代码</th><会员名</th><移动</th>< th> DOB< th><数据隐藏=电话，平板电脑"® M Reg Date</th>< th data-hide ＝电话，平板电脑"> M Fees/th</tr></thead>< tbody id ="tbody"></tbody></table> 此处使用Ajax附加了TBody.请帮助解决此问题.
我按照安德鲁(Andrew)的建议进行了更改，现在我得到了中间/中间的按钮.
但是按钮即将全部卡住，彼此之间没有任何间距.
任何解决此问题的方法都很好.
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屋！
