ページネーション

ページネーションとは

• ページを複数に分割することができるもの
• レイアウトを調整したるするのに便利
• グーグルのページなどの下部に表示されているやつ
  

実装方法

• kaminariというgemを使用する

Gemfile

gem 'kaminari','~> 1.2.1'

$ bundle install

• 設定ファイルを作成する
  下記コマンドで作成されたフォルダの中にページネーションの部分のhtmlが記述されているので変更を行う際は適宜修正する

$ rails g kaminari:config

• kaminariのテンプレを作成

$ rails g kaminari:views default

• controllerで、ページネーションを表示させたいデータに.page(params[:page])を追加する

def index
    @posts = Post.page(params[:page])
end

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

<h1>投稿一覧</h1>
<ul>
 <% @posts.each do |post| %>
   <li><%= post.content %></li>
 <% end %>
</ul>
<%= paginate @posts %>

以上でページネーションを実装できる。

• 1ページに表示するレコード数はデフォルトで25件ですが、これを指定したレコード数にしたい場合は、先程作成したファイルに以下１文を追加する（１ページ６件に指定したい場合）

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
  config.default_per_page = 6  #ここを追加
end

デザインを変更したい場合

• Gemfileに以下１文を追記

Gemfile

  gem 'bootstrap4-kaminari-views'

$   bundle install

paginateヘルパーに以下の以下の記述をする。

  <%= paginate @posts, theme: 'twitter-bootstrap-4' %>

↓このような見た目にできます

ラベルのアイコン化

• ラベルをアイコン化してシンプルなデザインに変更
• Font Awesomeを読み込ませて下記を追加する

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: "..."

このような見た目になる。