Ruby on Rails | ページネーション - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

ページネーション（Pagination）は、ウェブサイトやアプリケーションで長いリストやコンテンツを複数のページに分割する方法です。
ページネーションを利用することにはいくつかの利点があります。
長いリストやコンテンツを一度に表示すると、ページが読み込みに時間がかかり、ユーザーが情報を見つけるのが難しくなります。
ページネーションを使用することで、コンテンツが小さなページに分割され、ユーザーがスムーズに移動し、必要な情報を見つけやすくなります。

Ruby on Railsでページネーションを実装するために、kaminari というページネーション用のジェム（Gem）を使用します。

「GemFile」に以下の記述を追加します。

gem 'kaminari', '~> 1.2', '>= 1.2.2'

ターミナルで以下のコマンドを実行します。

bundle install

コントローラーのアクション内で、ページネーションを設定します。
たとえば、index アクションでモデルからデータを取得する場合、ページネーションを以下のように設定できます。

def index
  @items = Item.page(params[:page]).per(10)
end

ここで Item はページネーションを適用するモデルを表します。上記の例では、1ページあたり10個のアイテムを表示します。

ビューに以下の記述を追加します

<%= paginate @items %>

表示を確認します。
ページネーションが機能しますが、見た目がダサいです。

GemfileにBootstrap5用のkaminariビューを追加します。

 gem 'bootstrap5-kaminari-views'

バンドルします。

bundle

ビューの記述を以下に書き換えます。

<%= paginate @items, theme: 'bootstrap-5' %>

CSSが適用され、見た目が変わりました。

カスタマイズします。
まずは日本語の表示変更です。
「config/locales/ja.yml」ファイルのページネーション部分の抜粋です。

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

「app/javascript/stylesheets/application.scss」ファイルに記述を追加して、デザインをカスタマイズします。

  /*ページネーション自体のデザイン*/
.pagination>li>a {          
  color: #000000;   /*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {     
  background: #3d3f41;     /*背景の色を変える*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {        
  background: #696b6d;     /*背景の色を変える*/
  color: #ffffff;   /*文字の色を変える*/
}