目的
Railsで作成したアプリにページネーション機能を実装する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
-
アプリが作成されている。
【Rails】簡単な投稿アプリの作成 -
bootstrapが導入されている。【Rails】Bootstrap5の導入 -
Font Awesomeが導入されている。【Rails】FontAwesomeの導入 - アプリが日本語化されている。【Rails】Railsの日本語化
手順
はじめに
今回はページネーション機能を実装していきます。
ページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。
kaminariのインストール
それでは早速始めていきます!
まずはkaminariをインストールします。
Gemfile
gem 'kaminari'
ターミナル
% bundle install
これでインストールできました!
ページネーションの定義
次はページネーションの定義です。
.page(params[:page])を追記します。
app/controllers/posts_controller.rb
def index
@posts = Post.all.page(params[:page])
end
ページネーションの表示
続いて、ページネーションを表示させたいところに<%= paginate @posts %>を追加します。
app/views/posts/index.html.erb
<h1>投稿一覧</h1>
<ul>
<% @posts.each do |post| %>
<li><%= post.content %></li>
<% end %>
</ul>
<%= paginate @posts %>
以上で実装できました!
表示数の変更
1ページに表示する数を指定したい場合は下記のように記述します。
app/controllers/posts_controller.rb
def index
@posts = Post.all.page(params[:page]).per(10)
end
bootstrapでのデザイン変更
より見やすいデザインにするため、bootstrapを適用させます。
まずはkaminariにbootstrapを適用させて、デザインを変更します。
$ rails g kaminari:views bootstrap5
このコマンドによりapp/viewsにkaminariフォルダが自動生成され、ページネーションにbootstrapデザインが適用されます。
ラベルのアイコン化
さらにラベルをアイコンのみにすることで、よりシンプルなページネーションを作ることができます。
今回は、Font Awesomeを使用します！
config/locales/ja.ymlを編集して、使用したいアイコンを記述します。
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: "..."
これで、見やすいページネーションができました！
最後に
以上で、ページネーション機能の実装は完了です。
では。