DataTables の Custom toolbar elements と Buttons extension

2020年1月26日2020年1月27日

DISCLAIMER: This article is more than a year old and may not be current.

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

4.5

DataTablesはテーブルの周りに
DOM要素を挿入して
DataTables機能を制御します。
このメカニズムを利用して
独自のカスタム要素を挿入することもできます。

Custom toolbar elements

以下の例では、
ツールバーをカスタムして
HTMLを挿入しています。

$(document).ready(function() {
    $('#example_1').DataTable( {
        "dom": '<"toolbar">frtip'
    } );
 
    $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
} );

.toolbar {
    float: left;
}

Result


Chrome	Firefox	IE,Edge	Safari	Opera
4+	3.6+	IE 9+ Edge 12+	4+	10+

Buttons extension

Buttons は、
テーブルのツールバーにボタンを追加する
DataTablesの機能プラグインです。
(クリップボードへのコピー、
Excel / PDFへの保存など。)

ここで
注意しなければいけないのは、
DefaultのJavascriptファイルと
CSSファイルでは動作しない事です。
module を含めるか、
DataTables download builder で
カスタム DataTables パッケージに
差し替えます。

カスタムパッケージは、
以下の手順で選択していきます。

Step 1.
スタイリングフレームワークを選択する。

Step 2.
パッケージを選択する。

拡張機能で
Buttons にチェック。

必要なら
Responsive にもチェック。

Step 3.
ダウンロード方法を選択する。

※ それぞれのタブから
ダウンロード方法を選択してください。

※ Bootstrap などの
framework を選択した場合や、
違う拡張機能を選択した場合の
DataTables の表示は未確認です。

$(document).ready(function() {
    $('#example_2').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

Result

※ Custom message が分かりやすいように
auto print は無効に設定しています。

ルナの血液検査結果	退院時	検査 (前比)	再検査 (前比)	今検査 (前比)	正常域
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

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

Compatibility

次のWebブラウザーは、現在のリリースのDataTablesコアとその拡張機能によって完全にサポートされています。
DataTablesコアの次のメジャーバージョン（v1.11）はIE6-7をサポートしなくなることに注意してください
（すべての拡張機能で既にそうです）。


Chrome	Firefox	IE,Edge	Safari	Opera
Current and previous stable release versions.	Current Extended Support Release and all newer regular releases.	IE6-11, Edge. All extensions require IE8 or newer.	Safari v6 (Mac OS X v10.7 – Lion) and newer	Current and previous stable release versions.
現在および以前の安定 release versions。	現在の延長 Support Release 及び全ての新しい正規リリース。	IE6-11、Edge。すべての拡張機能にはIE8 以降が必要です。	Safari v6（Mac OS X v10.7-Lion）以降	現在および以前の安定 release versions。