withBootstrapOptionsを使用した角度データテーブルのスタイル設定フィルタとページ設定

Question

角度データテーブルのフィルタリングとページネーションコントロールの外観に影響を与えようとしており、フレームワークのwithBootstrapOptionsを使用して行うことができます。しかし、私は、ページ区切りボタン、ページサイズ入力フィールド、およびフィルタフィールドのスタイルに影響を与えるオプションを見つけることができないようです。私がしたいのは、入力フィールドとボタンの高さを小さくすることだけです。以下のコードは、私がこれまでにしようとしているものです：私はスタイリングを行うには、テーブルに自分のクラスを追加しようとしてきたと私はのxxxにul要素のクラスを設定することができました

.withBootstrap() 
.withBootstrapOptions({ 
    TableTools: { 
     classes: { 
      container: 'btn-group', 
      buttons: { 
       normal: 'btn btn-danger' 
      } 
     } 
    }, 
    ColVis: { 
     classes: { 
      masterButton: 'btn btn-primary' 
     } 
    }, 
    pagination: { 
     classes: { 
      ul: 'xxx', 
      li: 'yyy', 
      a: 'zzz' 
     } 
    } 
}) 

上記のコードでページ区切りを制御しましたが、liまたはa要素にしようとしたときに機能しません。これは可能ですか？誰かが私にフィルター入力フィールドとページ区切りフィールド/ボタンの高さを操作する方法の例を教えてください。

また、 'withBootstrapOptions'ヘルパーで使用できるすべてのオプションのドキュメントがどこにありますか？私は自分の検索でそれを見つけることができない。

Answer 1

ブラウザでデベロッパーツールを使用している場合、角型データシートは既にスタイル設定可能なページングボタンにクラスを配置します。 Chromeでデベロッパーツールを表示するには、要素を右クリックして[要素の検査]を選択します。利用可能なクラスをスタイルに合わせて見ることができるはずです。

現在のページ設定ボタンには「paginate_button current」というクラスがあります。 他のボタンのクラスは「paginate_button」です。

CSSを使用すると、これらのスタイルを自由にカスタマイズできます。

例えば、

.paginate_button{ 
background: #fff; 
cursor: pointer; 
} 
.paginate_button:hover{ 
    background: #b20000; 
} 
.paginate_button.current{ 
    background: #b20000; 
} 

は、あなたのページにそれらのスタイルを置きます。パディングとマージンも変更できるはずです。これはJavascriptで変更しようとするよりはるかにきれいに見えるだろう。