railsでのページネーションの実装とデザインの変更方法をまとめました。
ページネーションのデザインを自分好みに作れるとテンション上がります。
最終目標はこちら⬇︎

ページネーションの実装

kaminariというページネーション用のgemを使って実装していきます。
簡単に実装できるので一緒にやっていきましょう！

このようなページネーションができます。

1.kaminariのインストール

Gemfileにgem 'kaminari'を追加し、$ bundle installでインストールします。

Gemfile

# 最後の行に追加
gem 'kaminari'

$ bundle install

gemをインストールした後は一度サーバを再起動しないとうまく読み込まれません。Ctrl-cでサーバを止め、$ rails sでサーバを起動しましょう。

これでkaminariをインストールすることができました。

2.ページネーションを表示させる

controllerで、ページネーションを表示させたいデータに.page(params[:page])を追加します。
今回は例として、投稿データ(Post.all)にページネーションをつけていきます。

app/controllers/users_controller.rb

def index
  # ページネーションをつけたいデータに.page(params[:page])を追加
  @posts = Post.all.page(params[:page])
end

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

app/views/posts/index.html.erb

<h1>投稿一覧</h1>

<ul>
  <% @posts.each do |post| %>
    <li><%= post.content %></li>
  <% end %>
</ul>

<%= paginate @posts %>

これでページネーションが実装できました！

ページネーションが1ページに表示するレコード数はデフォルトで25件です。ページネーションを表示させるために、レコード数が26件以上になるようデータを作りましょう。

レコード数が26件以上あれば、ページネーションが表示されます。

3.ページに表示するレコード数の変更

1ページに表示するレコード数はデフォルトで25件です。このレコード数を変更したい場合は、controllerで.per(表示したいレコード数)を追加します。

例えば、.per(10)を追加すると1ページに10件のみレコードを表示します。

app/controllers/users_controller.rb

def index
  # .page(params[:page])の後に.per(10)を追加
  @posts = Post.all.page(params[:page]).per(10)
end

これで1ページに表示するレコード数を10件にすることができます。

ページネーションのデザイン変更

ページネーションが実装できたら、デザインを変更して見た目を分かりやすくしましょう。

1.bootstrapで見た目を整える

kaminariにbootstrapを適用させて、整ったページネーションにします。

まずはじめにbootstrapを読み込みます。
app/views/layouts/application.html.erbに以下のコードを追加して、アプリ全体にbootstrapを適用します。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Microposts</title>
    <%= csrf_meta_tags %>

    <!-- コード追加　Bootstrap CSS読み込みコード-->
    <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' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- コード追加　Bootstrap JavaScript読み込みコード-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

これでアプリにbootstrapが適用されます。

次に、kaminariにbootstrapを適用させます。
以下のコマンドを実行しましょう。

command

$ rails g kaminari:views bootstrap3

このコマンドによりapp/viewsにkaminariフォルダが自動生成され、ページネーションにbootstrapデザインが適用されます。

スッキリしたデザインのページネーションになりました！

2.cssでデザインを変える

bootstrapを適用させることで、かなり見やすいページネーションになりました。次は、cssを変更してさらに自分好みのデザインに変えていきましょう。
app/assets/stylesheets/application.cssからデザインを変更していきます。

app/assets/stylesheets/application.css

/*ページネーション自体のデザイン*/
.pagination>li>a {          
  border: none;     /*枠線をなくす*/
  color: #696969;   /*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {     
  background: #93c9ff;     /*背景の色を変える*/
  border-radius: 15px;     /*角を丸くする*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {        
  border-radius: 15px;    /*角を丸くする*/
}

このようにcssを設定すると、デザインは以下のようになります。

かわいらしいデザインになりました。

3.ラベルを日本語に変更する

ラベルとは、ページ番号の前後についている<<Firstや<Prveのことです。
デフォルトでは英語表記なので、こちらを日本語に変更していきます。

railsアプリのデフォルト言語を日本語に設定する

ラベルはi18nに対応しています。
config/application.rbのmoduleにconfig.i18n.default_locale = :jaを追加し、デフォルト言語を日本語に設定しましょう。

config/application.rb

#最後
module Testapp(自分のアプリ名)
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    config.i18n.default_locale = :ja #追加
  end
end

サーバを再起動して設定を反映させます。Ctrl-cでサーバを止め、$ rails sでサーバを起動しましょう。

ラベルの変更

config/localesに日本語変換用のymlファイルja.ymlを作成し、以下のコードを追加します。

config/locales/ja.yml

ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."

これでページネーションのラベルを日本語に変更できました!

初期デザインと比べて、見やすいページネーションになりました。

おまけ：ラベルをシンプルにする

ラベルをアイコンのみにすることで、よりシンプルなページネーションを作ることができます。
今回は、Font Awesomeからアイコンを探し使っていきます。

Font Awesomeのサイト

まずはじめに、Font Awesomeを読み込みます。
app/views/layouts/application.html.erbに以下のコードを追加して、アプリ全体にFont Awesomeを適用します。