はじめに
アイテム一覧画面に表示されるアイテム数が増えるにつれ、スクロールするのが大変/見づらいので、指定したアイテム数毎に、複数ページに分けて表示されるようにします。
今回はkaminariというgemを使ってこれを実現して行きます。
ページネーションを追加する前
ページネーションを追加した後
追記(2019/02/02)
個人的にはmislav/will_paginateの方が導入が簡単な印象を受けたので一応名前だけ紹介しときます。どんな感じかはRuby on Rails チュートリアル：実例を使って Rails を学ぼう > 10.3.3 ページネーションが分かり易い気がします。
ページネーション機能を追加する
はじめに、「Gemfile」に以下を追記し、bundle installします。
Gemfile
gem 'kaminari', '~> 0.17.0'
Rails5系を使用しているため、バージョン0.17.0を指定しています。
$ bundle install
次に、「app/controllers/welcome_controller.rb」を編集します。
welcome_controller.rb（編集前）
class WelcomeController < ApplicationController
PER = 8
def index
@words = Word.all
end
end
welcome_controller.rb（編集後）
class WelcomeController < ApplicationController
PER = 8
def index
@words = Word.page(params[:page]).per(PER)
end
end
最後に、「app/views/welcome/index.html.erb」を編集します。
app/views/welcome/index.html.erb(編集前）
<div class="page-header">
<h1>単語一覧</h1>
</div>
<div class="list-group">
<% @words.each do |word| %>
<%= link_to(word, class: 'list-group-item') do %>
<h4 class="list-group-item-heading">
<%= word.word %>
</h4>
<p class="list-group-item-text">
<%= word.reading %>
</p>
<% end %>
<% end %>
</div>
app/views/welcome/index.html.erb(編集後）
<div class="page-header">
<h1>単語一覧</h1>
</div>
<div class="list-group">
<% @words.each do |word| %>
<%= link_to(word, class: 'list-group-item') do %>
<h4 class="list-group-item-heading">
<%= word.word %>
</h4>
<p class="list-group-item-text">
<%= word.reading %>
</p>
<% end %>
<% end %>
<%= paginate @words %>
</div>
追記したのは、<%= paginate @words %>だけです。以上でページネーションが出来上がったかと思います。
Bootstrapに合わせる
Bootstrap用にカスタマイズすることもできます。
まずは、Gemfileにkaminari-bootstrapというgemを追記し、bundle installします。
Gemfile
gem 'kaminari-bootstrap', '~> 3.0.1'
$ bundle install
そして最後に、i18nの設定を追加すれば完了です。
「config/locales/kaminari_ja.yml」を追加し、以下を書き込みます。
config/locales/kaminari_ja.yml
ja:
views:
pagination:
first: "« 最初"
last: "最後 »"
previous: "‹ 前"
next: "次 ›"
truncate: "..."
最後に
上記の手順後、うまく表示されない場合は、一度「rails s」を終了し、再起動してみてください。