7ヶ月前に投稿

DataTables の Custom toolbar elements と Buttons extension

2020年1月27日

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

4.5

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

Custom toolbar elements

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

Custom toolbar
$(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.
スタイリングフレームワークを選択する。

Choose a styling framework

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

Select packages

拡張機能
Buttons にチェック。

Extensions Buttons

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

Extensions Responsive

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

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

Pick a download method

※ 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。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables の Custom toolbar elements と Buttons extension