今回はDataTablesというプラグインを使い、データをテーブル形式で画面に表示してみます。
ちなみにデータを画面に表示するためにRailsを利用していますが、Rails自体の説明は省略しますので、あしからず。
DataTablesとは
DataTablesはjQueryのプラグインとして提供されるオープンソースで、画面上でデータをテーブルの形式として表示するものです。Ajaxで動的にデータを取得することもでき、テーブル表示実装の手間を大いに軽減してくれます。
公式URL : https://www.datatables.net/
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIzVLAANpypu0URyqh7P1DMyWqjNMN5xaHLEECfsOK9FG8kcwmM-6pc9rC37ldJmRpQSRr9uMNt90DA-MCNK0xTAo80dMPDQZDqDm6gPKcvPQXkYMCNgD18h_bwz5wug-ZglfEPrvIk1Tw/s280/2016y02m10d_144928747.png)
Railsでの一覧(indexアクション)の初期表示
Railsで表示するデータと画面を作成します。今回は例として"library"アプリケーションを作成し、scaffoldジェネレータで"Books"モデルおよびコントローラ、ビュー等を自動生成しました。
※ Booksモデル作成時に、以下のカラムを設定しました。
カラム名 | 概要 | 型 |
title | 本のタイトル | string |
author | 本の著者 | string |
genre | 本のジャンル | string |
page | 本のページ数 | integer |
publication | 本の発効日 | date |
その後画面を介して本の情報を入力した一覧画面(indexアクション)はこんな感じになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LNdKcdrqjbbR-dJ32aJwNdrLfuwg9lGEQb5_OIkLEH0T_9UfM-KZbhwycEW4iGPTvAKCfQ_4aaRI2910siFFSrGm_v_B4Fyd-2yPLPKei7u0CfwKMMJrY9nWP00YWv7h4W39408fpzFn/s280/2016y02m10d_153200099.png)
自動生成される画面なので、データが並べてあるだけの状態です。
この画面をDataTablesを使い、きちんとしたテーブル形式でデータを表示していきます。
画面にDataTablesを適応してみる
まずはDataTablesを画面に適応します。DataTablesのDownLoadページ下部に"Package results"と記載されたテキストエリアがあるので、その中の文字をコピーします。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfUUKkCxnix0v5_8UrZxYEEynw3LZz1NQAiI0ApbHogsf8XQO1B_k97Tj7bae9vaMkcjyeHfsR_Mfd_rJQDZVIQOTpmeYYBYJNW4Cs3ksUQovxrkpE-Q0kv2eriWS3AQAe4gRR8DyHwaS/s280/2016y02m10d_161214027.png)
次に自動生成された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プラグインを読み込んだ"だけで、"テーブル形式で表示"していないため、画面上には変化はありません。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqHltyFBveg61-mT5uL_o4Ey1tA3RZcxYTbiQblt78H6fEv0o_V1x95uIsr2jhBBRY517ghiourm9OyLFvQcoqxPfs6JVKw_AEfFeSAEs-GnxDjnhAj_0sZuU10J_gbrBp1QwJYGWUqxq9/s280/2016y02m10d_162152817.png)
では、ブラウザのデベロッパーツールを利用して、"テーブル形式で表示する"ことをしてみます。
Chromeの場合は[その他のツール]>[デベロッパーツール]を選択すると、ブラウザ下部もしくは右にデベロッパーツールが展開します。
(Chorme以外のブラウザでも用意されていることがほとんどなので、開き方は自分で調べてください)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHoQ1xkjzuPmIpAttjYuJIjqjcOWXJpaPRtFRxsXMOQ4h7LPFMqiJuP8hJ_azJBIZ2hYgvmGEFDth8xol0VVQBOgEeEmOiWWEOk36HAhpLnOFlJlqB0QjP-jEYND73s-Y1COQINUM2UFP/s280/2016y02m10d_162305570.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUUaDavZqcgPbi5tQNXywJW4c8gNdpQd2OGd9azFDUuD8nU6-XsgdQUNBYrveLouZx6oDvTdFeh6-BpPdea7H7pN2Ou4-HgvHN5DmisAvh4mAXRJnq_C1m8XG6RKHQuviuwo3LFTOglLv/s280/2016y02m10d_164213854.png)
デベロッパーツールが展開したら、メニューの"console"(コンソール)を選択します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwzdbCE5XJfL_vCV3F7jSNVjac2ejxHuUwQsIGp_3YH8nlQtdsAQPbr_dzyPfJ184y46cICVJduHHUxA5R6cjVuL057NMb_I4yABOxeYlgLIy8zN8_Zt-UA2ufptR-2u2Zhx8dpE3w2P6/s280/2016y02m10d_164304163.png)
もしもデベロッパーツールのコンソールで"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()
すると、ただデータが表示されていた画面がテーブルっぽくなりました!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ms83tFoDnNpce5gu3HwOrCR6zNLW2TT4QnRX2frBSEZTugXz1SN_ZloaiTyhe5wj-hG6NQJy_Jb99302eTkXB7N0LTlk0nhhPUKDhXqIfoxpLlzy6KXoEhCHwwWomjnJaNvYAVXcwVJo/s280/2016y02m10d_165328837.png)
同時にコンソールにエラー発生が出てきました!
テーブル"っぽく"と表現しましたが、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を修正した後、先ほど入力したコマンドをコンソールから実行すると、今度はエラーなしで画面にテーブルが表示されるようになりました!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzo9bl3UfgUChaBYtqaU5ix6bgSuchJk_VAWT6qCqCSlay1CSJURpKoibwC1BLsqZ4RM1k9b4E-oYzjcMo1p_cXP7z2FHsy2ltc-erhBjoWNE82G_H6DjshsZfci_UWKYZsYCynWJeF11/s280/2016y02m10d_171540820.png)
検索用ボックスをはじめ、ページ数の表示、表示数の切り替え用ボックスが表示されていますね。
最後はわざわざコンソールからコマンドを実行しなくても済むよう、画面を開いた際にコマンドを実行させるようにします。
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 件のコメント:
コメントを投稿