[Rails]ページネーション15/20

はじめに

kaminari Gemを使って投稿一覧画面とブックマーク一覧画面にページネーションを実装していきます。

https://github.com/kaminari/kaminari

環境：

Rails 6.1.7.3
ruby 3.0.0

kaminariをインストールする

Gemfile

gem 'kaminari'

bundle install

configファイルを生成する

rails g kaminari:config
config/initializers/kaminari_config.rb

config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

こちらのファイルを編集して全モデルに適用させるかモデルファイルごとに設定することができます。

app/models/article.rb

class Article < ActiveRecord::Base
  paginates_per 20
end

Articlesコントローラーを編集する

一ページあたり投稿を10件表示させます。

app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  def index
    @articles = Article.all.includes(:user).page(params[:page]).per(10)
  end
end

Articlesビューを編集する

app/views/articles/index.html.erb

<div>
  <%= paginate @articles %>
</div>

ページネーションを追加されました。

デザインをカスタマイズする

デフォルトのページネーションのビューファイルを作成してくれます。

rails g kaminari:views default
      create  app/views/kaminari/_first_page.html.erb
      create  app/views/kaminari/_gap.html.erb
      create  app/views/kaminari/_last_page.html.erb
      create  app/views/kaminari/_next_page.html.erb
      create  app/views/kaminari/_page.html.erb
      create  app/views/kaminari/_paginator.html.erb
      create  app/views/kaminari/_prev_page.html.erb

app/views/kaminari/_paginator.html.erb

<%= paginator.render do -%>
  <nav class="pagination" role="navigation" aria-label="pager">
    <%= first_page_tag unless current_page.first? %>
    <%= prev_page_tag unless current_page.first? %>
    <% each_page do |page| -%>
      <% if page.display_tag? -%>
        <%= page_tag page %>
      <% elsif !page.was_truncated? -%>
        <%= gap_tag %>
      <% end -%>
    <% end -%>
    <% unless current_page.out_of_range? %>
      <%= next_page_tag unless current_page.last? %>
      <%= last_page_tag unless current_page.last? %>
    <% end %>
  </nav>
<% end -%>

デフォルトのテーマを使う

ページネーションのビューファルを編集してスタイリングするか、デフォルトで用意されたテーマを使うかになります。
テーマ一覧になります。

rails g kaminari:views
        - default
            The default one.
            This one is used internally while you don't override the partials.
        - bootstrap2
            bootstrap2
        - bootstrap3
            bootstrap3
        - bootstrap4
            bootstrap4
        - bourbon
            bourbon
        - bulma
            bulma
        - foundation
            foundation
        - foundation5
            foundation5
        - github
            github
        - google
            google
        - materialize
            materialize
        - purecss
            purecss
        - semantic_ui
            semantic_ui

bootstrapテーマを使う

rails generate kaminari:views bootstrap4
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...

bootstrapのデザインになりました。

終わりに

ブックマーク一覧でも同じ手順で実装していきます。
kaminariを使って簡単にページネーションを実装できるので便利ですね。

https://autovice.jp/articles/139