angularjs - 数据表 - 更改按钮样式

Question

是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、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' }
]);

这适用于“干净”的设置，但您可能包括所有默认样式表。

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

此外，DataTables 本身已经为每个按钮类型注入(inject)了独特的类，例如 .buttons-excel你可以利用它。

我建议您通过 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;
}