4ヶ月前に投稿

DataTables + Font Awesome 5

この記事は約 7 分で読めます。

4.5

DataTables は、
多数のアイコンを使用しませんが、
情報をエンドユーザーに伝えるために
いくつかのアイコンを使用します。

今日は、
このいくつかのアイコンと
Buttons
Font Awesome に integration
してみたいと思います。

Font Awesome が提供する
アイコンを使用するには、
CSS Pseudo-elements
(擬似要素) を使用できます。

先ずは、以下の
結果をご覧ください。

Data from Luna’s blood test report
ルナの血液検査結果 退院時 検査 (前比) 再検査 (前比) 今検査 (前比) 正常域
RBC (10⁶/㎕) 4.51 3.82 (⤵) 3.50 (⤵) 4.33 (⤴) 5.50-8.50
Hgb (g/dL) 6.7 5.4 (⤵) 5.1 (⤵) 6.6 (⤴) 10-15
Hct (L%) 22.0 17.5 (⤵) 16.3 (⤵) 20.0 (⤴) 32-40
BUN-PS (mg/dl) 48.4 52.1 (⤴) 56.0 (⤴) 52.1 (⤵) 17.0-35.0
CRE-PS (mg/dl) 2.87 3.55 (⤴) 2.80 (⤵) 2.42 (⤵) 0.8-1.8
IP-PS (mg/dl) 5.0 4.3 (⤵) 3.0 (⤵) 3.5 (⤴) 2.7-6.4
ルナの血液検査結果 退院時 検査 (前比) 再検査 (前比) 今検査 (前比) 正常域
DataTables の設定等、
詳しくは↓
リストを参照の事

Default style の3ヶ所
Font Awesome に integration した
結果が↑のテーブルになります。

以下の画像を参照。

Default style
  1. Buttons for DataTables
  2. Sort icons
  3. Paging controls

Sort and Paging controls icons

Font Awesome に integration する
CSS file
DataTables CDN で入手できます。

しかし、
Font Awesome 4 用の
CSS file なので
Font Awesome 5 で使用するには
少し変更が必要となります。

font-family: FontAwesome;

     ↓

font-family: "Font Awesome 5 Free";
font-weight: 900;

Font Awesome 5 で
CSS Pseudo-elements を
定義する詳しくは
How to Define an Icon Using
CSS Pseudo-Elements

参照してください。

Buttons for DataTables

Buttons for DataTables では
styling options として
通常のテキストではなく
button に Font Awesome を
表示する事が出来ます。

Before
Button with text
After
Button with Font Awesome 4

ここでも
Font Awesome 4」用 なので
Font Awesome 5」で表示するには
<i>タグを編集する必要があります

Example
<i class="fa fa-file-excel-o"></i>

    ↓

<i class="fas fa-file-excel"></i>

After
Button with Font Awesome 5

※ Font Awesome のカラーとサイズは
変更しています。

まぁ、上記でも良いのですが、
テキストを Font Awesome ではなく

button 自体を Font Awesome
替える方法を検索しました。

Stack Overflow にて
答えを見つけましたが、
ここでも
Font Awesome 4 の方法なので
カスタマイズが必要です。

$('#example').DataTable( {
  dom: 'Bfrtip',
    buttons: {
      //reset class and change the rendered tag 
      //from <button> to <i>
      dom: {
        button: {
          tag: 'i',
          className: ''
        }
      },
      //since we now have completely unstyled icons add
      //some space between them trough a .custom-btn class
      buttons: [{
        titleAttr: 'Copy',
        extend: 'copy',
        className: 'custom-btn fa-2x fas fa-copy',
        text: ''
      }, {
        titleAttr: 'Download as PDF',
        extend: 'pdfHtml5',
        className: 'custom-btn fa-2x fas fa-file-pdf',
        text: ''
      }, {
        titleAttr: 'Download as Excel',
        extend: 'excelHtml5',
        className: 'custom-btn fa-2x fas fa-file-excel',
        text: ''
      }, {
        titleAttr: 'Download as CSV',
        extend: 'csvHtml5',
        className: 'custom-btn fa-2x fas fa-file-csv',
        text: ''
      }, {
        titleAttr: 'Print',
        extend: 'print',
        className: 'custom-btn fa-2x fas fa-print',
        text: ''
      }, ]
    }
});
.custom-btn {
  cursor: pointer;
  margin-right: 5px;
}

この記事に表示されている
DataTables の html コードは
GitHub のこちらです。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables + Font Awesome 5