角度データボタンのデフォルトボタンスタイルを無効にするには

Question

角度データテーブルにボタンを追加すると、デフォルトのテーマ設定でボタンが作成され、ボタンがページの他の部分と異なって見えます。下の画像）に：

私は、ページ上の他のボタンのようなブートストラップボタン（）を模倣するためにボタンを取得するためにCSSで遊んで試してみましたが、私は多くの幸運を持っていませんよ。私はbutton.dt-button, div.dt-button, a.dt-button {}に私のCSSの値を追加しようとしましたが、!importantですべてをオーバーライドしなければなりませんでした。

また、bower_components/datatables/media/css/buttons.bootstrap.cssをマイページ<links>に追加しようとしましたが、効果がありませんでした。

これを達成するためのかなり簡単な方法がありますか？

Answer 1

私はdt-buttonの参照を削除するために使用します。 dt-buttonすべてのトラブルを引き起こすようです。それは、統一されたボタンの外観に異なるタグをスタイルするdataTables自身の試みであり、これはブートストラップと衝突する。だから私は、ブートストラップクラスを追加classNameにBS3レイアウトの残りの部分のように見えるのDataTableボタンました：

.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 

私は、.NETパッケージはDataTableのダウンロードビルダー、CDNとgithubのに比べて低い優先度を持っていると信じています。彼らは同期していません。

Answer 2

あなたはそれに応じて調整する必要がありますが、私の場合は私が追加：

display: inline; 

を上記浮遊している左側の要素のCSSに。私の場合（jQuery/Rails/Bootstrap）、私はButtonsを追加していました。

ボーナスポイントのためにあなたが要素にデフォルトの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ボタンが出力されます。