DataTables の Custom toolbar elements と Buttons extension
この記事は約 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をサポートしなくなることに注意してください
(すべての拡張機能で既にそうです)。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません