今回はDataTablesというプラグインを使い、データをテーブル形式で画面に表示してみます。
ちなみにデータを画面に表示するためにRailsを利用していますが、Rails自体の説明は省略しますので、あしからず。
DataTablesとは
DataTablesはjQueryのプラグインとして提供されるオープンソースで、画面上でデータをテーブルの形式として表示するものです。Ajaxで動的にデータを取得することもでき、テーブル表示実装の手間を大いに軽減してくれます。
公式URL ： https://www.datatables.net/
Railsでの一覧（indexアクション）の初期表示
Railsで表示するデータと画面を作成します。今回は例として"library"アプリケーションを作成し、scaffoldジェネレータで"Books"モデルおよびコントローラ、ビュー等を自動生成しました。
※ Booksモデル作成時に、以下のカラムを設定しました。
| カラム名 | 概要 | 型 |
| title | 本のタイトル | string |
| author | 本の著者 | string |
| genre | 本のジャンル | string |
| page | 本のページ数 | integer |
| publication | 本の発効日 | date |
その後画面を介して本の情報を入力した一覧画面（indexアクション）はこんな感じになります。
自動生成される画面なので、データが並べてあるだけの状態です。
この画面をDataTablesを使い、きちんとしたテーブル形式でデータを表示していきます。
画面にDataTablesを適応してみる
まずはDataTablesを画面に適応します。DataTablesのDownLoadページ下部に"Package results"と記載されたテキストエリアがあるので、その中の文字をコピーします。
次に自動生成されたindex.html.erbを開き、ファイルの一番上にコピーした文字をペーストします。
※簡潔にDataTablesを実行するために、index.html.erbに直接書き込む手法にしています。
以降もJavaScriptをindex.html.erbに直接書き込む箇所がありますが、cssやJavaScriptの読み込みを別途管理している場合、そちらの方法に沿って必要なファイルを読み込み・実行させるように読み替えてください。
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table>
<thead>
～ 略 ～
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table>
<thead>
～ 略 ～
最後にindex.html.erb内の<table>タグに任意のIDを設定します。例として、"books_table"と設定しました。
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
～ 略 ～
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
～ 略 ～
ここまでの設定の後、再度ブラウザで一覧画面を開きます。
今の段階だと、"DataTablesプラグインを読み込んだ"だけで、"テーブル形式で表示"していないため、画面上には変化はありません。
では、ブラウザのデベロッパーツールを利用して、"テーブル形式で表示する"ことをしてみます。
Chromeの場合は[その他のツール]>[デベロッパーツール]を選択すると、ブラウザ下部もしくは右にデベロッパーツールが展開します。
（Chorme以外のブラウザでも用意されていることがほとんどなので、開き方は自分で調べてください）
デベロッパーツールが展開したら、メニューの"console"（コンソール）を選択します。
もしもデベロッパーツールのコンソールで"Uncaught ReferenceError: jQuery is not defined"というエラー（赤字のメッセージ表示）が発生していた場合、DataTablesの実行前提として必要なjQueryが読み込めていません。
Railsから作成していれば、デフォルトで読み込み設定しているので発生しないと思いますが、もしも発生した場合、index.html.erbに下記の修正を行います。（Rails以外でHTMLを作成している場合も、同様の修正で構いません）
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.css"/>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
～ 略 ～
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<p id="notice"><%= notice %></p>
<h1>Listing Books</h1>
<table id="books_table">
<thead>
～ 略 ～
デベロッパーツールのコンソールで特にエラーがないようであれば、コンソールに次の入力を行ってからEnterキーをクリックします。
("#books_table"は"#自分で設定したID"に置き換えてください)
$("#books_table").DataTable()
すると、ただデータが表示されていた画面がテーブルっぽくなりました！
同時にコンソールにエラー発生が出てきました！
テーブル"っぽく"と表現しましたが、DataTablesの公式ページに載っているテーブルは検索用のボックスがありますし、ページ数の表示、表示数の切り替え用ボックスなどが表示されていました。
これらは特にオプションを指定しなければ、デフォルトで表示されるようになっています。
なので、今の段階では"テーブル形式で表示する"ことはしていますが、コンソールで発生を通知しているエラーが原因で、中途半端な状態になっています。
エラーの原因ですが、これはRailsで自動生成されたindex.html.erb内のテーブルが、DataTablesが求めるテーブルの基本の書き方と合致していないところがあるためです。
具体的にはindex.html.erb内で下記のように<th>タグをcolspanによって連結しているところです。
～ 略 ～
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
～ 略 ～
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
～ 略 ～
画面で言えば、"Show"、"Edit"、"Destroy"などのリンクのヘッダ部分です。
DataTablesでは、基本的にカラムのヘッダ部分と、データ部分のカラム数が同じであることを求める仕様となっています。
Railsで自動生成されたindex.html.erb内のテーブルでは、上記のヘッダの連結により、ヘッダ部分とデータ部分の数が不一致の状態であり、そのためエラーが発生してしまいました。
解決方法としては、ヘッダ部を増やせばいいので、colspanの連結を止めて、単純に<th>タグを3つ並べるようにしました。
～ 略 ～
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
～ 略 ～
<table id="books_table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Page</th>
<th>Publication</th>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
～ 略 ～
index.html.erbを修正した後、先ほど入力したコマンドをコンソールから実行すると、今度はエラーなしで画面にテーブルが表示されるようになりました！
検索用ボックスをはじめ、ページ数の表示、表示数の切り替え用ボックスが表示されていますね。
最後はわざわざコンソールからコマンドを実行しなくても済むよう、画面を開いた際にコマンドを実行させるようにします。
index.html.erbに下記の修正を行います。
～ 略 ～
</table>
<br>
<%= link_to 'New Book', new_book_path %>
<script>
$(document).ready(function() {
$('#books_table').DataTable();
});
</script>
</table>
<br>
<%= link_to 'New Book', new_book_path %>
<script>
$(document).ready(function() {
$('#books_table').DataTable();
});
</script>
これで画面を開いただけで、テーブル形式でデータを画面に表示するようになりました。
次回はDataTablesのオプションなどの話や、Ajax連携についてを書こうかと考えています。
0 件のコメント:
コメントを投稿