今回は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を使い、きちんとしたテーブル形式でデータを表示していきます。