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

我有以下代码：

var数据集=[
[“佐藤航空”、“会计”、“东京”、“5407”、“2008/11/28”、“162700美元”]，
[“Angelica Ramos”、“首席执行官（CEO）”、“伦敦”、“5797”、“2009/10/09”、“1200000美元”]，
[“加文·乔伊斯”、“开发商”、“爱丁堡”、“8822”、“2010/12/22”、“92575美元”]，
[“Jennifer Chang”、“区域总监”、“新加坡”、“9239”、“2010/11/14”、“357650美元”]，
[“Brenden Wagner”、“软件工程师”、“旧金山”、“1314”、“2011/06/07”、“206850美元”]，
[“Fiona Green”、“首席运营官（COO）”、“旧金山”、“2947”、“2010/03/11”、“850000美元”]，
[“寿投”、“区域营销”、“东京”、“8899”、“2011/08/14”、“163000美元”]，
[“Martena Mccray”、“售后支持”、“爱丁堡”、“8240”、“2011/03/09”、“324050美元”]，
[“Unity Butler”、“营销设计师”、“旧金山”、“5384”、“2009/12/09”、“85675美元”]
];
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
dom:'Blfrtip'，
数据：数据集，
按钮：[“复制”、“excel”]，
栏目：[{
标题：“姓名”
}, {
标题：“职位”
}, {
标题：“办公室”
}, {
标题：“Extn。”
}, {
标题：“开始日期”
}, {
标题：“工资”
}]
});
});
给css dt按钮您想要更改的按钮

.dt-buttons{
left:50%;
}

解决方案

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

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

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

演示


var数据集=[
[“佐藤航空”、“会计”、“东京”、“5407”、“2008/11/28”、“162700美元”]，
[“Angelica Ramos”、“首席执行官（CEO）”、“伦敦”、“5797”、“2009/10/09”、“1200000美元”]，
[“加文·乔伊斯”、“开发商”、“爱丁堡”、“8822”、“2010/12/22”、“92575美元”]，
[“Jennifer Chang”、“区域总监”、“新加坡”、“9239”、“2010/11/14”、“357650美元”]，
[“Brenden Wagner”、“软件工程师”、“旧金山”、“1314”、“2011/06/07”、“206850美元”]，
[“Fiona Green”、“首席运营官（COO）”、“旧金山”、“2947”、“2010/03/11”、“850000美元”]，
[“寿投”、“区域营销”、“东京”、“8899”、“2011/08/14”、“163000美元”]，
[“Martena Mccray”、“售后支持”、“爱丁堡”、“8240”、“2011/03/09”、“324050美元”]，
[“Unity Butler”、“营销设计师”、“旧金山”、“5384”、“2009/12/09”、“85675美元”]
];
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
dom:'lfBrtip'，
数据：数据集，
按钮：[“复制”、“excel”]，
栏目：[{
标题：“姓名”
}, {
标题：“职位”
}, {
标题：“办公室”
}, {
标题：“Extn。”
}, {
标题：“开始日期”
}, {
标题：“工资”
}]
});
});
.dataTables\u wrapper.dt按钮{
浮动：无；
文本对齐：居中；
}

另一种方法（除了公认的答案外）是增加包含按钮的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'

演示-
如果您使用的是“TableTools”构造函数，您可以查看此链接以供参考，此扩展现在已失效，并已被替换为。
您的代码段中没有按钮（复制、excel）。谢谢，这不是一个完美的解决方案，但它肯定会为您节省时间。很好，1+就够了。