いい感じにテーブル操作するjsライブラリ DataTables覚え書き
htmlのテーブルをクライアントサイドでごにょごにょしたい時に使えるライブラリDataTablesの覚え書き。
ざっと下記のようなことができる。
- ページング
- 表示件数の変更
- フィルタリング
- ソート
- 検索
- テーブルのスクロール
使い方(参考ページ)
丁寧に解説をしている方がいらっしゃるので、取り急ぎリンクのみで。
qiita.com
etc9.hatenablog.com
rowspanなどに対応するライブラリ
rowspanなどでテーブルデータの結合が行われていると、途端に効かなくなったりする。
公式にも対応はしていない模様。
一つの対応策としてdatatables-rowsgroupというプラグインがあったのでメモ。
実装例
tr2行分を合わせてデータ1行分となるようなケースの実装例。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./DataTables/Bootstrap-3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.15/css/dataTables.bootstrap.min.css"/> <script type="text/javascript" src="DataTables/jQuery-2.2.4/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="DataTables/DataTables-1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="DataTables/DataTables-1.10.15/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="datatables-rowsgroup-master/dataTables.rowsGroup.js"></script> <script> jQuery(function($){ $("#foo-table").DataTable({ // 件数切替機能 無効 lengthChange: false, // 検索機能 無効 searching: false, // ソート機能 無効 ordering: false, // 情報表示 無効 info: false, // 3件ずつ表示(2件ずつグループ化されるので、6を指定) displayLength: 6, // 1カラム目をグループ化(rowsGroup.jsの機能) rowsGroup: [0], }); }); </script> <title></title> </head> <body> <table id="foo-table" class="table table-bordered"> <thead> <tr><th rowspan=2>No</th><th>都道府県</th><th>画像</th></tr> <tr><th>地方</th><th>説明</th></tr> </thead> <tbody> <!-- 行結合したいデータもHTML上では分割して同一値のtd要素を2回書く。プラグインが勝手に同一値を結合して表示してくれる。 --> <tr><td>1</td><td>北海道</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>1</td><td>北海道</td><td>北海道の画像です</td></tr> <tr><td>2</td><td>青森</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>2</td><td>東北</td><td>青森の画像です</td></tr> <tr><td>3</td><td>岩手</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>3</td><td>東北</td><td>岩手の画像です</td></tr> <tr><td>4</td><td>秋田</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>4</td><td>東北</td><td>秋田の画像です</td></tr> <tr><td>5</td><td>東京</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>5</td><td>関東</td><td>東京の画像です</td></tr> </table> </body> </html>
制約
今回の例だと情報表示や件数切替は無理。
擬似結合はしてくれるが、DataTablesが認識する行は元のtrタグ数に依存する。
情報表示は結合した行数分だけ計上されるし、件数切り替えしたら行結合の考慮をしない行数でページングされる。
制約つけたくないなら、諦めてライブラリ以外の処理を組み込んだほうがよさそう。
追記(2017/08/04) 件数切替を組み込んでみた
APIリファレンスを読むと自前で表示件数変更などのイベントを呼ぶように組み込むこともできるようだったので、rowspan="2"のようなページで常にSELECTされた値の2倍の件数を表示するように組んでみた。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./DataTables/Bootstrap-3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.15/css/dataTables.bootstrap.min.css"/> <script type="text/javascript" src="DataTables/jQuery-2.2.4/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="DataTables/DataTables-1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="DataTables/DataTables-1.10.15/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="datatables-rowsgroup-master/dataTables.rowsGroup.js"></script> <script> jQuery(function($){ var dataTable = $("#foo-table").DataTable({ // 件数切替機能 無効 lengthChange: false, // 検索機能 無効 searching: false, // ソート機能 無効 ordering: false, // 情報表示 無効 info: false, // 3件ずつ表示(2件ずつグループ化されるので、6を指定) displayLength: 6, // 1カラム目をグループ化(rowsGroup.jsの機能) rowsGroup: [0], }); // セレクトボックスが変更されたら表示行数を選択値*2に設定して再描画する $(function(){ $("#table-length").change(function(){ dataTable.page.len($('[name=page-length]').val()*2).draw(); }); }); }); </script> <title></title> </head> <body> <div>表示件数 <select name="page-length" id="table-length"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <table id="foo-table" class="table table-bordered"> <thead> <tr><th rowspan=2>No</th><th>都道府県</th><th>画像</th></tr> <tr><th>地方</th><th>説明</th></tr> </thead> <tbody> <!-- 行結合したいデータはtr上では分割して2回書く。プラグインが勝手にtdを結合して表示してくれる。 --> <tr><td>1</td><td>北海道</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>1</td><td>北海道</td><td>北海道の画像です</td></tr> <tr><td>2</td><td>青森</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>2</td><td>東北</td><td>青森の画像です</td></tr> <tr><td>3</td><td>岩手</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>3</td><td>東北</td><td>岩手の画像です</td></tr> <tr><td>4</td><td>秋田</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>4</td><td>東北</td><td>秋田の画像です</td></tr> <tr><td>5</td><td>東京</td><td><img src="http://localhost/dummy.jpg" width="100" height="100"></td></tr> <tr><td>5</td><td>関東</td><td>東京の画像です</td></tr> </table> </body> </html>
