DataTables Part1 -Introduction-
概要
DataTablesとはjQueryを用いたテーブルプラグインの一種。
使用した機能を備忘録を兼ねて掲載。
選んだ理由として、下記機能が標準搭載されており、見た目もすっきりしていることが挙げられる。更にカスタマイズしていくことも可能。
1. インスタント検索（フィルタ機能）
2. ページネーション (ページング処理)
3. ソート機能
基本的にはDataTablesの公式サイトを見れば大概のことは載っている。
導入方法
jQueryとDataTablesのライブラリを読み込んで、反映したいTableのid、classを指定すれば基本的な形が出来上がる。idは好きな名前をつければよいが、javascript(datatables_custom.js)内と合わせること。”datatables_custom.js” にはTableをDataTables化するとともに、ここで色々記述することでオリジナル仕様にしていくことができるjQueryを記述する。自分で書いて定義するものなので、新規作成で用意する。
具体的な動きはこちら。DataTablesのバージョンは1.10.15を利用している。
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="./js/datatables_custom.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
:
:
</table>
$(document).ready(function() {
$('#example').DataTable();
} );
デフォルトの基本機能
上部から表示件数の切り替え、検索(全カラム対象)、ソート、件数表示、ページングは上記記述だけで自動的に実装される。
基本機能以外にも拡張機能としていろいろ用意されており、Downloadページで必要な機能を選択してダウンロードまたはCDNのURLを作成することができる。選び方等は追々書く予定。
基本機能の変更
“datatabels_custom.js” を編集して見た目を変更する。
$(document).ready(function() {
$('#example').DataTable({
/**
* 配置換え (https://datatables.net/examples/basic_init/dom.html)
* 左上から順に指定していく
* <"top"> : テーブルヘッダの上部
* f : Filtering input (検索)
* r : pRocessing (読み込み時に「処理中」というメッセージを出力)
* t : Table (テーブル本体)
* <"bottom"> : テーブルボトムの下部
* l : Length changing (表示件数切替)
* i : Information (件数)
* p : Pagenation (ページング)
* <"clear"> : <div class="clear"></div>
*/
dom: '<"top"f>rt<"bottom"lip><"clear">',
/**
* 日本語化
*/
language: {
url: "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json"
},
/**
* 件数切替の刻みを変更 (デフォルトは [ 10, 25, 50, 100 ])
* ・決められた件数の刻みだけの場合
* lengthMenu: [10, 50, 100, 1000]
* ・決められた件数 + 全て(All)の表示をしたい場合
* 0以下の件数を指定することで、ページネーションを無効化
*/
lengthMenu: [[10, 50, 100, 500, -1], [10, 50, 100, 500, "全"]]
});
} );
次回以降では、さらに踏み込んでカスタマイズしていく予定。