More than 3 years have passed since last update.

[Rails]ページネーション機能

Posted at 2020-11-30

実装したいこと

投稿が多くなってくると一覧表示した時に見にくくなってしまうのでページを分けました。

1. kaminariのインストール

Gemfileの一番下に以下を記述し、ターミナルでbundle installを実行します。

Gemfile

gem 'kaminari'

2. ページネーションの表示

今回はbefore_actionを用いて投稿一覧を表示しています。
ページネーションを表示させたいデータに**.page(params[:page])を追記します。
また、.per(10)**を追記することで1ページに10件のデータを表示するという設定をします。
デフォルトでは25件が表示されるようになっています。

app/controllers/posts_controller.rb

def index_post
  @posts = Post.order(created_at: :desc).page(params[:page]).per(10)
end

ページネーションを表示させたいところに**<%= paginate @posts %>**を追記します。

app/views/posts/index.html.erb

~略~
  <div class='item-contents'>
    <h2 class='title'>クチコミ一覧</h2>
    <%= render "shared/posts" %>
    <%= paginate @posts %>   # 追記
  </div>
</div>

3. デザイン

今回はbootstrapとFont Awesomeを用いて実装しました。
まずbootstrapとFont Awesomeを読み込みます。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>CosmeticReview</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    # 以下を追記　Font Awesome読み込み
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
    # 以下を追記　bootstrap読み込み
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%# <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

次に、kaminariにbootstrapを適用させます。
ターミナルで以下を実行します。

ターミナル

rails g kaminari:views bootstrap3

実行後、app/views/kaminariフォルダが自動生成され、ページネーションにbootstrapが適用されます。

CSSでさらに自分の好みのデザインに変更します。

app/assets/stylesheets/index.css

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
}
.pagination > li > a {
  border: none;
  color: #999;
}
.pagination > li > a:hover {
  color: turquoise;
  background-color: white;
}
.pagination > .active > a {
  color: turquoise;
  background-color: white;
}
.pagination > .active > a:hover {
  background-color: white;
  color: turquoise;
}
/* --ページネーション */

4. ラベルの変更

今回はラベルにアイコンを用いて実装しました。

config/locales/ja.yml

ja:
 views:
     pagination:
       first: <i class="fas fa-angle-double-left"></i>
       last: <i class="fas fa-angle-double-right"></i>
       previous: <i class="fas fa-angle-left"></i>
       next: <i class="fas fa-angle-right"></i>
       truncate: "..."

#3 参考リンク
https://github.com/kaminari/kaminari
https://qiita.com/rio_threehouse/items/313824b90a31268b0074

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up