【Rails】kaminari + Bootstrapで見た目を整え、ページネーションを中央にする

kaminariとは

• ページネーションを簡単に実装できるrailsのgemです

GitHub/kaminari

導入方法

gemfile

gem 'kaminari'

gemを追加し

terminal

$ bundle install

インストール

導入はこれで完了

表示されたページネーションを中央に

やり方非常に簡単です

まずはテンプレートファイルを作成

terminal

$ rails g kaminari:views default

もしもBootstrapを導入しているなら

terminarl

$ rails g kaminari:views bootstrap

defaultではなくbootstrapを選択する事で勝手に綺麗に整えてくれます

• Bootstrap4を導入しているならbootstrap4にしてください

作成されたファイルをみてみると

views/kaminari/_pagenator.html.erb

<%= paginator.render do %>
  <nav>
    <ul class="pagination">
      <%= first_page_tag unless current_page.first? %>
      <%= prev_page_tag unless current_page.first? %>
      <% each_page do |page| %>
        <% if page.left_outer? || page.right_outer? || page.inside_window? %>
          <%= page_tag page %>
        <% elsif !page.was_truncated? -%>
          <%= gap_tag %>
        <% end %>
      <% end %>
      <%= next_page_tag unless current_page.last? %>
      <%= last_page_tag unless current_page.last? %>
    </ul>
  </nav>
<% end %>

ulにclass="pagination"が当てられているので

application.scss

.pagination {
  justify-content: center;
}

これでページネーションが中央に表示されました！