【学習6.0】【Windows】ページネーション

通知ページにページング機能をつけます。


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


記述追加　GemFile(92行目)

gem 'kaminari'

GemFile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

# 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'
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.9.3'
gem 'trestle-auth', '~> 0.4.0'

# trestle検索
gem 'trestle-search', '~> 0.4.2'

# trestle画像アップロードと表示
gem 'trestle-active_storage', '~> 3.0'
gem "mini_magick"
gem 'image_processing', '~> 1.2'

# trestleリッチテキスト
gem 'trestle-tinymce', '~> 0.3.0'

# 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) %>&nbsp;&nbsp;&nbsp;(&nbsp;<%= n.created_at.strftime('%Y年%-m月%-d日 %-H時%-M分') %>&nbsp;)&nbsp;</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

ページネーション