如何覆盖Angular Datables按钮的默认按钮样式
当我向我的Angular Datatables添加按钮时，它使用默认主题创建它们，这导致按钮看起来与我页面的其余部分不同(请参见下图中的列可见性按钮)：
我尝试过使用CSS来让按钮模仿Bootstrap按钮(就像页面上的其他按钮一样)，但我没有太多的运气。我尝试将我的CSS值添加到button.dt-button, div.dt-button, a.dt-button {}中，但不得不用!important覆盖所有内容，这在我看来是不正确的。
我还尝试在我的页面<links>中添加bower_components/datatables/media/css/buttons.bootstrap.css，但同样没有效果。
有没有非常直接的方法来实现这一点？
回答 2
Stack Overflow用户
发布于 2016-12-12 05:32:16
我用来删除dt-button引用。似乎所有的麻烦都是由dt-button引起的。这是dataTables自己尝试将不同的标签样式化为统一的按钮外观，这与bootstrap冲突。因此，为了让dataTables按钮看起来像BS3布局的其余部分，我向className添加了引导程序类：
.withButtons([
{ extend: 'pdf',
className: 'btn btn-sm btn-primary'
}
])并删除initComplete中的所有dt-button引用：
.withOption('initComplete', function() {
$('.dt-button').removeClass('dt-button')
})这确保了按钮是纯BS的，没有额外的样式。我相信这不是“正确”的做法。从理论上讲，应该有withBootstrap()和withButtons()的有效组合，以及适当的包版本，但从未能够成功找到一个。我通过CLI获取所有包，并且不想手动与包混在一起。
datatables.net
datatables.net-bs
datatables.net-buttons
angular-datatables我认为与dataTables download builder、cdn和github相比，.net包的优先级较低。它们不同步。
Stack Overflow用户
发布于 2017-04-16 06:06:16
您将需要相应地进行调整，但在我的示例中，我添加了：
display: inline;添加到左侧浮动在上面的元素的css。在我的例子(jQuery / Rails / Bootstrap)中，我添加了按钮，而Bootstrap主题也搞砸了(如上所述)。
对于奖励积分，您可以覆盖元素上的默认CSS类：
https://datatables.net/reference/option/buttons.dom
因此，在我的例子中(CoffeeScript表示法)：
$ ->
locations = $('#locations').dataTable
dom: 'Bfrtip'
ajax:
url: $('#locations').data('source')
type: 'GET'
order: [[ 3, 'desc' ], [ 2, 'desc' ]]
processing: true
serverSide: false
responsive: false
buttons:
dom:
container:
className: 'btn-group'
button:
className: 'btn btn-primary btn-outline'这就去掉了允许基础BS CSS正常工作的dt-buttons和dt-button。
<div class="btn-group">
<a class="btn btn-primary btn-outline buttons-copy buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>Copy</span></a>
<a class="btn btn-primary btn-outline buttons-pdf buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>PDF</span></a>
</div>然后输出正确的BS按钮。
https://stackoverflow.com/questions/41092810
复制相似问题
腾讯云开发者
