如何更改数据表中按钮的位置答案

【问题标题】：How to change the position of buttons in DataTables如何更改数据表中按钮的位置
【发布时间】：2015-12-06 03:10:10
【问题描述】：

我有以下代码：

var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,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>

我想要做的是将按钮位置更改为中心，如下所示：

如何做到这一点？

【问题讨论】：

您的 sn-p 中没有按钮（复制、excel）。

标签： javascript jquery html json datatables

【解决方案1】：

解决方案

您可以使用以下 CSS 规则。请注意，它将针对页面上的所有表格。使用更具体的规则仅针对一个表。

.dataTables_wrapper .dt-buttons {
  float:none;  
  text-align:center;
}

为了让它工作，你需要使用dom: 'lfBrtip'。有关详细信息，请参阅dom 选项。

演示

var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,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>

【讨论】：

谢谢，这不是完美的解决方案，但它肯定会为您节省一天的时间。很棒的 1+。

【解决方案2】：

给css dt-buttons你想要改变的按钮，

.dt-buttons{
left:50%;
}

【讨论】：

【解决方案3】：

另一种方法（除了接受的答案）是增加包含按钮的 div 的宽度。并且您可以使用 float: right 将特定按钮/按钮移动到中心。

要增加 div 的宽度，请使用以下代码 -

 $("div#example_wrapper").find($(".dt-buttons")).css("width", "400px");

注意宽度的值可能需要重新调整。

比移动按钮 -

var styles = {
    position: "relative",
    float: "right"
};

$("div#example_wrapper").find($(".dt-buttons")).find($("a")).css(styles);

在这种情况下，您不需要使用dom: 'lfBrtip'

演示 - https://jsfiddle.net/ggLak8e1/2/

【讨论】：

【解决方案4】：

如果您使用Direct Initiallization 的“TableTools”构造函数，您可以查看此链接以供参考，此扩展现已停用并已替换为Buttons。

【讨论】：

【解决方案5】：

使用 jQuery 和 css：

$('.dt-buttons').css('text-align', 'right');

或

使用 jQuery 和 bootstrap4：

$('.dt-buttons').addClass('text-right');

【讨论】：