web-dev-qa-db-ja.com

DataTablesのボタンの位置を変更する方法

私は次のコードを持っています：

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>

私がしたいのは、次のようにボタンの位置を中央に変更することです。

enter image description here

どうすればそれを達成できますか？

javascriptjqueryhtmljsondatatables
5
neversaint

[〜＃〜]ソリューション[〜＃〜]

次のCSSルールを使用できます。ページ上のすべてのテーブルを対象とすることに注意してください。より具体的なルールを使用して、1つのテーブルのみをターゲットにします。

.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>
12
Gyrocode.com

Direct Initiallization に "TableTools"コンストラクターを使用している場合は、このリンクを参照してください。この拡張機能は廃止され、 Buttons に置き換えられました。

0
Snziv Gupta

これを行う別の方法（受け入れられた回答に加えて）は、ボタンを含むdivの幅を増やすことです。そして、float：rightを使用して、特定のボタンを中央に移動することができます。

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/

0
ni8mr

cssdt-buttonsに変更したいボタンを指定します。

.dt-buttons{
left:50%;
}
0
David Jaw Hpan