数据表 - 更改按钮样式

Question

有什么方法可以更改 angularjs 数据表中的按钮样式（colvis、复制、打印、excel）。

vm.dtOptions = DTOptionsBuilder.newOptions().withButtons([
    'colvis',
    'copy',
    'print',
    'excel'
]);

我唯一能做到这一点的方法是直接在源代码中，但这不是好方法。这是 jquery 的解决方案，但这对 DOM

没有任何影响

$('#myTable').DataTable( {
buttons: {
    buttons: [
        { extend: 'copy', className: 'copyButton' },
        { extend: 'excel', className: 'excelButton' }
    ]
}
} );

css

.copyButton {
background-color: red
}
.excelButton{
background-color: red
}

谢谢

Answer 1

只需用文字替换按钮标识符并添加 className :

.withButtons([
   'colvis', 
   { extend: 'copy', className: 'copyButton' },
   'print',
   { extend: 'excel', className: 'excelButton' }
]);

这适用于 "clean" 设置，但您可能包含所有默认样式表。

DataTables 默认使用 <a> 标签，并通过 .dt-button class 将其设置为看起来像一个按钮，其中有很多伪 class 样式 :hover 等等。这使得更改背景变得复杂，您将需要额外的 hackish CSS。

此外，DataTables 本身已经为每个按钮类型（例如 .buttons-excel）注入了独特的 classes，您可以从中受益。

我建议您通过 dom 选项完全重置默认行为：

.withButtons({
   dom: {
     button: {
       tag: 'button',
       className: ''
     }
   },
   buttons: [
     'colvis', 
     'copy',
     'print',
     'excel'
   ]
})

现在您可以从头开始为 .buttons-excel 设计漂亮的样式了：

.buttons-excel {    
  background-color: red;
  color: white; 
  border: 1px outset;
}
.buttons-excel:hover {
  background-color: pink;
}

Answer 2

如果您使用的是 bootstrap 4 版 DataTables，按钮会自动具有 class btn-secondary.
使用 dom 选项，您将完全失去 bootstrap 设计。
但是，您可以像这样添加 classes：

myTable = $('#myTableId').DataTable({
    buttons: [
      { extend: 'colvis', className: 'btn-outline-secondary' },
      { extend: 'excel', className: 'btn-outline-secondary' }
]});

但对我而言，这并没有改变按钮设计，因为 btn-secondary 仍然存在。所以我手动删除了它。

  setTimeout(function () {
    $oTable.buttons().container().addClass('ml-2').appendTo('#myTableId_length'); //attach buttons to table length choser
    $oTable.buttons().container().find('.btn').removeClass('btn-secondary'); //remove class btn secondary
  }, 500);

这被包装在 time-out 中以确保之前已经渲染了所有内容。

数据表 - 更改按钮样式

datatables - change button style

angularjs

angular-datatables