Javascript 如何更改DataTables中按钮的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32491569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the position of buttons in DataTables
提问by neversaint
I have the following codes:
我有以下代码：
var dataSet = [
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Blfrtip',
data: dataSet,
buttons: ['copy', 'excel'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
<tfoot><tr></tr></tfoot>
</table>What I want to do is to change the button location to the center, like this:
我想要做的是将按钮位置更改为中心，如下所示：
How can achieve that?
怎样才能做到这一点？
回答by Gyrocode.com
SOLUTION
解决方案
You can use the following CSS rule. Please note that it will target all tables on the page. Use more specific rule to target one table only.
您可以使用以下 CSS 规则。请注意，它将针对页面上的所有表格。使用更具体的规则仅针对一张表。
.dataTables_wrapper .dt-buttons {
float:none;
text-align:center;
}
Also in order for it to work you need to use dom: 'lfBrtip'. See domoption for more details.
此外，为了使其正常工作，您需要使用dom: 'lfBrtip'. 有关dom更多详细信息，请参阅选项。
DEMO
演示
var dataSet = [
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'lfBrtip',
data: dataSet,
buttons: ['copy', 'excel'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});.dataTables_wrapper .dt-buttons {
float:none;
text-align:center;
}<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
<tfoot><tr></tr></tfoot>
</table>回答by David Jaw Hpan
give css dt-buttons what you want to change button,
给 css dt-buttons 你想要改变的按钮，
.dt-buttons{
left:50%;
}
回答by ni8mr
Another method (in addition to the accepted answer) to do this is to increase the width of the div, which contains the buttons. And than you can use float: rightfor specific button/buttons for moving it to the center.
另一种方法（除了已接受的答案）是增加包含按钮的 div 的宽度。并且您可以使用float: right用于特定按钮/按钮将其移动到中心。
To increase the width of the div use following code -
要增加 div 的宽度，请使用以下代码 -
$("div#example_wrapper").find($(".dt-buttons")).css("width", "400px");
Note that the value of widthmay need to re-adjust.
注意宽度的值可能需要重新调整。
And than for moving buttons -
而不是移动按钮 -
var styles = {
position: "relative",
float: "right"
};
$("div#example_wrapper").find($(".dt-buttons")).find($("a")).css(styles);
In this case, you don't need to use dom: 'lfBrtip'
在这种情况下，您不需要使用 dom: 'lfBrtip'
回答by Snziv Gupta
You can see this link for reference if you are using "TableTools" constructor for Direct Initiallization, this extension has now been retired and has been replaced by the Buttons.
如果您使用“TableTools”构造函数进行Direct Initiallization，您可以查看此链接以供参考，此扩展现已停用并已被Buttons取代。
