Dockerを使った開発環境でページネーション機能を作る

{dockerを使った開発環境でページネーション機能}

今回は有名なgem であるkaminariを使ってページネーション機能を実装する。

記事の対象者

・Dockerの環境構築が出来る方
・ページネーション機能を一から知りたい方

###ページネーション機能 とは？？
ページネーション機能とは、大量のデータをviewで表示する際に、全部表示するのではなくページごとに分けて表示する方法である。

開発環境

Rails 5.0.0.1
bootstrap 4.0.0
今回はbootstrapを導入し、Dockerの環境構築が済んでいる状態を想定する。

デモ

###1. gemをインストール

Gemfile内にgem 'kaminari'と記述する。
その後以下のコマンドを実行する。

$ docker-compose build
$ docker-compose up -d

$ docker-compose buildはgemのインストールやdockerのimageを実行するときに使う。
$ docker-compose up -dでコンテナを起動する。

###2. kaminariを使う準備を整える

・kaminariの設定ファイルを作成

$ docker-compose exec web bundle exec rails g kaminari:config

・kaminariのviewファイルを作成
※今回はBootstrapを使用する。

$ docker-compose exec web bundle exec rails g kaminari:views bootstrap4

このコマンドを実行するとbootstrap4のページネーションに合わせたデザインが自動で生成される。（便利...！）

###3. コントローラーを設定

kaminariをインストールしたことによりモデルのクラスな対して page メソッドが使用できるようになった。
ここでは掲示板サイトを作ることを目的として　@board というインスタンス変数を使用すると仮定して、

コントローラーのindexアクション内で以下の記述をする。

  def index
    @boards = Board.page(params[:page])
  end

これにより引数に渡したページに表示するデータを取得できる。
デフォルトでは１ページにつき、25件のデータを取得する。

この時点では、page というパラメーターが渡されることはないため、常に1ページ目が表示される。
そのため、viewを追加して表示できるようにする。

###4. viewを作成する
　kaminariをインストールしたことにより、 pagenate　ヘルパーが使えるようになった。
よってこれを使ってindex.html.erbに以下の記述をする。

<%= paginate @boards %>

paginate の引数には一覧表示対象を渡す。

viewを確認してみると、

となって、ページネーション機能が完成！