通知ページにページング機能をつけます。
「GemFile」に以下の記述を追加します。
記述追加 GemFile(96行目)
gem 'kaminari'
GemFile
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3', '>= 6.0.3.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.2', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Bulma gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' #デバイス gem 'devise' # 日本語化 gem 'rails-i18n' # google認証 gem 'omniauth' gem 'omniauth-google-oauth2' # アマゾンS3 gem "aws-sdk" #管理ダッシュボード gem 'trestle', '=0.8.12' gem 'trestle-auth', '=0.2.5' # trestle検索 gem 'trestle-search', '~> 0.3.0' # trestle画像アップロードと表示 gem 'trestle-active_storage', '~> 2.2', '>= 2.2.1' gem "mini_magick" gem 'image_processing', '~> 1.2' # trestleリッチテキスト gem 'trestle-tinymce', '~> 0.1.3' # Markdown関数 gem 'redcarpet', '~> 3.5' gem 'coderay', '~> 1.1', '>= 1.1.3' # Stripe gem 'stripe', '=4.18.1' # ページング gem 'kaminari'
コマンド(2つ)
bundle
rails g kaminari:views bulma
「app\controllers\notifications_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\notifications_controller.rb(7行目)
.page(params[:page]).per(5)
app\controllers\notifications_controller.rb
class NotificationsController < ApplicationController before_action :authenticate_user! def index current_user.unread = 0 current_user.save @notifications = current_user.notifications.order(created_at: "DESC").page(params[:page]).per(5) end end
「app\views\notifications\index.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\notifications\index.html.erb(19行目)
<!-- ページネーション --> <div class="card"> <div class="card-header-title is-centered"> <%= paginate @notifications %> </div> </div>
app\views\notifications\index.html.erb
<section class="section"> <div class="container"> <div style="margin-left: 50px; margin-bottom: 30px;"> <%= link_to 'メッセージを見る', conversations_path, class: "button is-primary" %> </div> <table class="table" style="margin-left: 50px; margin-bottom: 50px;"> <div class="container" id="notifications"> <% @notifications.each do |n| %> <tr> <td> <strong><%= n.content %></strong> <span class="pull-right"><%= time_ago_in_words(n.created_at) %> ( <%= n.created_at.strftime('%Y年%-m月%-d日 %-H時%-M分') %> ) </span> </td> </tr> <% end %> </div> </table> <!-- ページネーション --> <div class="card"> <div class="card-header-title is-centered"> <%= paginate @notifications %> </div> </div> </div> </section>
ブラウザ確認
http://localhost:3000/notifications