kaminariを使用してbootstrap5でCSSを追加する

#はじめに

railsチュートリアルをローカル環境で進めています。
will_pagenate　gemを使っていますが、kaminariを使って実装してみようと興味本位でやってみた備忘録です。
こちらの記事を参考にされる方はバージョンにお気をつけください。

#環境
ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin20]
Rails 6.1.4.1
kaminari (1.2.1)
bootstrap (5.1.0)

#前提
bootstrapがアプリ内で使えているものとします。

bootstrapの導入はこちらでどうぞ。

#①kaminariのインストール

こちらからkaminariをインストールします。

これだけだと

こんな感じで寂しいので

このようにするために

こちらもインストールします。

具体的には

Gemfile

gem 'kaminari', '~> 1.2', '>= 1.2.1'
gem 'bootstrap5-kaminari-views', '~> 0.0.1'

としてから

command

% bundle

をしてインストールします。

#②下準備
今回はindexページにてユーザー一覧をページネーションを使用して実装します。

index.html.erb使うために、user_controllerのindexアクションでDBのUserテーブルから全てのユーザーを取得します。

user_controller.rb

def index
  @users = User.all.page(params[:page]).per(30)
end

User.all でDBから全てのユーザーを取得し
.page(params[:page])でページネーションを使う指示をして
.per(30)で１つのページにつき30件データを表示させるようにします。

index.html.erbで表示させます。

index.html.erb

<ul class="users">
  <% @users.each do |user| %>
    <li>
      <%= gravatar_for user, size: 50  %>
      <%= link_to user.name, user, class: "user" %>
    </li>
  <% end %>
</ul>

<%= paginate @users, theme: 'bootstrap-5' %>　　#ここがページネーション

先ほどコントローラで定義した＠usersに格納されたユーザーデータはeachを使って一つずつ表示されるのに使われ、さらにページネーションにも使われます。

theme: 'bootstrap-5'
こちらをつけることでCSSが適用されます。

#こちらを忘れずに！

rails serverを再起動したら読み込まれます。

#参考