【rails初学者向け】kaminari+bootstrapでページネーションの作成方法を解説します

今回はrailsを使用して、ページネーションの実装を解説します。

簡単、かつ、よく使用する便利なgemなので、覚えておくと良いです。

また、bootstrapを使って、少しお洒落な感じにするので、

デフォルトのデザインが微妙。。。

なんて方にもおすすめです。

それでは、やっていきましょう。

versions
  • ruby 2.6.5
  • rails 6.0.0

準備しよう

まずは、scaffoldを使用して、ページネーションを実装する準備をしましょう。

以下のコマンドを順番に実行してください。

~$ rails new pagination
~$ cd pagination
pagination$ rails db:create
pagination$ rails g scaffold page title:string content:text
pagination$ rails db:migrate

routes.rbを以下のように変更しましょう。

Rails.application.routes.draw do
  root 'pages#index'
  resources :pages
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

これで準備は完了です。

rails sをしてlocalhostにアクセスして、データを6個ほど登録しておいてください。

画像のようになっていたらOKです!

kaminariをインストールしよう

それでは、ここからページネーションの実装です。

Gemfileに以下を記述して、bundle installをします。

gem 'kaminari'

pages_controller.rbのindexアクションを以下のように書き換えます。

  def index
    @pages = Page.page(params[:page]).per(5)
  end

per()1ページに何記事表示するかを決定します。

最後に、pages/index.html.erbに、

<%= paginate @pages %>

を記述すれば完成です。

kaminariのinstallからページネーションの表示は完成です。最後にbootstrapを使用して少しお洒落にしていきましょう。

bootstrapを使用しよう

最後にbootstrapを使用して、デザインを変更していきましょう。

ターミナルに以下のコマンドを入力します。

pagination$ rails g kaminari:views bootstrap4

次に、application.htnl.erbの記述を変更します。

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

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>
    <%= yield %>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrapのinstallはとっても簡単ですね。
画像のようになっていれば完成です。

まとめ

  • Gemfileにkaminariを記述し、bundle install
  • per()は1ページの表示上限を決定している
  • kaminariがbootstrap用のviewを用意している

kaminariを使用したページネーションは、よく使用されるので、復習することをおすすめします。

参考

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

Kaminari