2016年2月15日月曜日

JQueryのDataTablesプラグインを使って、データをテーブル形式で画面に表示してみる

こんにちは、井下です。


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