↓↓クリックして頂けると励みになります。
【35 | Full Calendar】 << 【ホーム】 >> 【37 | Stripe】
ページネーション（Pagination）は、ウェブサイトやアプリケーションで長いリストやコンテンツを複数のページに分割する方法です。
ページネーションを利用することにはいくつかの利点があります。
長いリストやコンテンツを一度に表示すると、ページが読み込みに時間がかかり、ユーザーが情報を見つけるのが難しくなります。
ページネーションを使用することで、コンテンツが小さなページに分割され、ユーザーがスムーズに移動し、必要な情報を見つけやすくなります。
Ruby on Railsでページネーションを実装するために、kaminari というページネーション用のジェム（Gem）を使用します。
「GemFile」に以下の記述を追加します。
gem 'kaminari', '~> 1.2', '>= 1.2.2' gem 'bootstrap5-kaminari-views'
ターミナルで以下のコマンドを実行します。
bundle install
コントローラーのアクション内で、ページネーションを設定します。
「app\controllers\reservations_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\reservations_controller.rb（29行目）
.page(params[:page]).per(5)
これは５アイテム以降は次のページに読み込ませるという設定になります。
記述追加 app\controllers\reservations_controller.rb
class ReservationsController < ApplicationController before_action :authenticate_user! before_action :set_reservation, only: [:approve] def create room = Room.find(params[:room_id]) if current_user == room.user flash[:alert] = "ホストが予約することはできません。" else start_date = Date.parse(reservation_params[:start_date]) end_date = Date.parse(reservation_params[:end_date]) days = (end_date - start_date).to_i + 1 @reservation = current_user.reservations.build(reservation_params) @reservation.room = room @reservation.price = room.price @reservation.total = room.price * days @reservation.save flash[:notice] = "予約が完了しました。" end redirect_to room end def your_trips @trips = current_user.reservations.order(start_date: :asc).page(params[:page]).per(5) end def your_reservations @rooms = current_user.rooms end def approve @reservation.Approved! redirect_to your_reservations_path end private def reservation_params params.require(:reservation).permit(:start_date, :end_date) end def set_reservation @reservation = Reservation.find(params[:id]) end end
「app/views/reservations/your_trips.html.erb」ビューに以下の記述を追加します
<div class="mt-4"><%= paginate @trips, theme: 'bootstrap-5' %></div>
記述追加 【app/views/reservations/your_trips.html.erb】10行目
<div class="container mt-4"> <div class="card"> <div class="card-body"> <h5 class="card-title text-danger h3 font1">予約内容(ゲスト)</h5> <% if @trips.blank? %> <h5 class="font1">表示できる予約はありません。</h5> <% end %> <div class="mt-4"><%= paginate @trips, theme: 'bootstrap-5' %></div> <% @trips.each do |trip| %> <div class="card mt-4"> <div class="card-body"> <ul class="list-group"> <li class="list-group-item" style="border: none;"> <span class="font1">申込日：</span><%= I18n.l(trip.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">部屋名：</span> <%= link_to room_path(trip.room), style: "text-decoration: none;", data: { turbolinks: false} do %> <span class="btn btn-light"><%= trip.room.listing_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ホスト：</span> <%= link_to user_path(trip.room.user), class: "tootip", style: "text-decoration: none;" do %> <span class="btn btn-light"><%= trip.room.user.full_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">宿泊日：</span> <%= I18n.l(trip.start_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ご出発：</span> <%= I18n.l(trip.end_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">泊数：</span><%=trip.total/trip.price %>泊 </li> <li class="list-group-item" style="border: none;"> <span class="font1">料金：</span><%= number_to_currency(trip.total) %> </li> <li class="list-group-item mt-4" style="border: none;"> <% if trip.end_date < Date.today %> <%= render partial: "reviews/guest_form", locals: {reservation: trip} %> <% else %> <span class="alert alert-danger" style="font-size: 0.7rem;">チェックアウト後にレビューできます</span> <% end %> </li> </ul> </div> </div> <% end %> </div> </div> </div>
表示を確認します。
http://localhost:3000/your_trips
ページネーションが機能しますが、見た目がデフォルトの状態になっています。
カスタマイズします。
「app/assets/stylesheets/application.scss」ファイルに記述を追加して、デザインをカスタマイズします。
/*ページネーション自体のデザイン*/ .pagination>li>a { color: #000000; /*文字の色を変える*/ } /* 表示しているページ番号のデザイン */ .pagination>.active>a { background: #3d3f41; /*背景の色を変える*/ } /*ホバー時のデザイン*/ .pagination>li>a:hover { background: #696b6d; /*背景の色を変える*/ color: #ffffff; /*文字の色を変える*/ }
記述追加 【app/assets/stylesheets/application.scss】60行目
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; // Google Fonts body * { font-family: Kosugi Maru; } .font1 { font-family: Rampart One; } .font2 { font-family: Kaisei Opti; } //アバター オンライン .avatar { position: relative; display: inline-block; &::before { content: ""; position: absolute; bottom: 1px; left: 38px; width: 10px; height: 10px; border-radius: 100%; border: 1px solid white; } &.online:before { background-color: #1dbf73; } &.offline:before { background-color: gray; } } //ホームページ用 .has-bg-img { background: url("/assets/home/background01.jpg") center center; background-size: cover; } /*ページネーション自体のデザイン*/ .pagination>li>a { color: #000000; /*文字の色を変える*/ } /* 表示しているページ番号のデザイン */ .pagination>.active>a { background: #3d3f41; /*背景の色を変える*/ border-color: #3d3f41; } /*ホバー時のデザイン*/ .pagination>li>a:hover { background: #696b6d; /*背景の色を変える*/ color: #ffffff; /*文字の色を変える*/ }
表示を確認します。
CSSが適用されて、見た目が変わりました。
http://localhost:3000/your_trips
【35 | Full Calendar】 << 【ホーム】 >> 【37 | Stripe】
↓↓クリックして頂けると励みになります。
