LoginSignup
2
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-11

{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

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

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

4. viewを作成する

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

<%= paginate @boards %>

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

viewを確認してみると、
スクリーンショット 2020-01-09 10.26.01.png

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

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1