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

Question

我有以下代码：

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>

我想做的是把按钮位置改到中间，像这样：

如何实现？

Answer 1

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

.dt-buttons{
left:50%;
}

Answer 2

SOLUTION

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

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

此外，为了使其正常工作，您需要使用 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>

Answer 3

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

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

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

注意width的值可能需要重新调整

与移动按钮相比 -

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

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

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

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

Answer 4

如果您使用 Direct Initiallization, this extension has now been retired and has been replaced by the Buttons 的 "TableTools" 构造函数，您可以查看此 link 以供参考。

Answer 5

使用jQuery和css:

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

或

使用 jQuery 和 bootstrap4:

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

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

How to change the position of buttons in DataTables

html

javascript

jquery

json

datatables