3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails6】ページネーション機能実装(kaminari)

Last updated at Posted at 2020-12-20

#はじめに

記事の検索・閲覧アプリの作成中です。今回は、検索結果一覧表示が1ページで膨大な量になってしまうため、ページネーション機能を実装し、1ページに表示する数を制限して、スッキリとした見た目を実現したいと思います。

#環境

Ruby on Rails '6.0.0'
Ruby '2.6.5'

#前提

ユーザーが記事の検索などを行い、記事一覧が表示され、閲覧できる。

#①Gemの導入

ページネーション機能を簡単に実装できるgem「kaminari」を導入します。

Gemfile
gem 'kaminari'
ターミナル
% bundle install

#②コントローラーにてページネーションを定義する

app/controllers/articles_controller.rb
  def index
    @articles = Article.page(params[:page]).per(8).order('created_at DESC')
  end

「page」と「per」というメソッドがkaminariで定義されているメソッドです。perメソッドの引数にどれだけの記事(レコード)が表示されたら、ページを増やすのかを指定しています。

#③ビューファイルの編集

app/views/articles/index.html.erb
(省略)
 <%= paginate @articles %>

表示したいビューファイルに上記を記述するだけで完了です!!!

#おまけ(ページネーションのカスタマイズ)

上記の3工程でページネーション機能は導入できますが、ビューファイルはdefaltで決まっています。それを修正する方法について記述します。

ターミナル
% rails g kaminari:views default (①)

              or

% rails g kaminari:views bootstrap4 (②)

①のコマンドで、app/views配下にkaminariが追加されるため、そこで変更を行うことができます。
②のコマンドでbootstrapなどのCSSフレームワークを適用できます。

また、デフォルトで英語表記になっているため、日本語表記に変更するためには、config/locales以下にkaminari_ja.ymlというファイルを作成し、以下のように記述すれば適用できます。

config/locales/kaminari_ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."

#おわりに

https://pikawaka.com/rails/kaminari
上記の記事を参考にしました。ありがとうございました!!

3
2
0

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
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?