Jquery DataTable：ボタンを同じ場所にあるアイコンに置き換える

データテーブルにデフォルトのExcelボタンを追加しました。Jquery DataTable：ボタンを同じ場所にあるアイコンに置き換える

$('#searchResult').DataTable(
    { 
     "dom": '<"top"lB>rt<"bottom"ip>', 
     buttons: [ 
     { 
      extend: 'excel', 
      exportOptions: 
      { 
       columns: ':visible' 
      } 
     }, 
     'colvis'] 
)}

そして、私は次のCSSを介してデータ・テーブルの上の右端（トップ側）にボタンを配置した：ここで

はそれのためのスクリプトです

.dataTables_wrapper .dt-buttons { 
    float:right; 
}

しかし、同じ機能を維持しながらボタンをアイコンに置き換える（UIを改善する）ために、どのようにボタンを置き換えることができるのか分かりません。そして、ボタンの正確な同じ位置にアイコンを挿入するにはどうすればいいですか？

出典

2016-12-04 Mr.SK

各ボタンはユニークなクラス（.buttons-excelなど）で強化されているため、特定のボタンの内部コンテンツを他のものと非常に簡単に交換できます。 initComplete()コールバックでこれを行います。 "アイコン" ここで、Font Awesomeを使用する例多くのものになります

デモ - davidkonrad.One質問@>https://jsfiddle.net/6639xcj4/

出典

2016-12-04 16:43:43 davidkonrad

おかげけれども - 場合とします

$('#example').DataTable({ //... initComplete: function() { $('.buttons-copy').html('<i class="fa fa-copy" />') $('.buttons-csv').html('<i class="fa fa-file-text-o" />') $('.buttons-excel').html('<i class="fa fa-file-excel-o" />') $('.buttons-pdf').html('<i class="fa fa-file-pdf-o" />') $('.buttons-print').html('<i class="fa fa-print" />') } });

はこのような何かを作り出しますアイコン要素の背景色を変更したいのですが、上記のコードを使ってどうやったらいいですか？ –

@ Mr.SK、CSSターゲット '.btn-default' - > ** https：//jsfiddle.net/6639xcj4/2/**' 'i .fa'のスタイルに魅力がありますが、それは私たちが望むボタンですスタイルに。 – davidkonrad

ああ。理解しています。 @Davidkonrad –

Jquery DataTable：ボタンを同じ場所にあるアイコンに置き換える

答えて

関連する問題