如何覆盖Angular Datables按钮的默认按钮样式

Question

当我向Angular Datatables添加按钮时，它会使用默认主题创建它们，这会导致按钮与我页面的其余部分看起来不同（请参阅下图中的“列可见性”按钮）：

我尝试过使用CSS来获取模仿Bootstrap按钮的按钮（就像页面上的其他按钮一样），但我没有太多运气。我尝试将我的CSS值添加到button.dt-button, div.dt-button, a.dt-button {}但是必须覆盖!important的所有内容，这对我来说似乎不对。

我还尝试将bower_components/datatables/media/css/buttons.bootstrap.css添加到我的页面<links>，但它也没有效果。

有没有非常直接的方法来实现这一目标？

Answer 1

我用来删除dt-button引用。 dt-button似乎造成了所有麻烦。 dataTables自己尝试将不同的标签设置为统一的按钮外观，这与bootstrap冲突。因此，为了让dataTables按钮看起来像BS3布局的其余部分，我将引导类添加到className：

.withButtons([ 
   { extend: 'pdf', 
     className: 'btn btn-sm btn-primary' 
   }  
])

并删除dt-button中的所有initComplete引用：

.withOption('initComplete', function() {
  $('.dt-button').removeClass('dt-button')
})

这确保按钮是纯BS，没有额外的样式。我确信这是不＆＃34;正确＆＃34;这样做的方式。从理论上讲，应该有withBootstrap()和withButtons()的组合以及适当的包版本，但从未能够成功找到一个。我通过CLI获得所有包，并且不希望手动混合包。

datatables.net
datatables.net-bs
datatables.net-buttons
angular-datatables

我相信.net软件包的优先级低于dataTables下载构建器，cdn和github。他们没有同步。

Answer 2

您需要相应调整，但在我的情况下，我添加了：

display: inline;

到左边浮动的元素的css。在我的情况下（jQuery / Rails / Bootstrap）我添加了Buttons和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'

这摆脱了dt-buttons和dt-button，它允许基本BS CSS正常工作。

<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按钮。