Rails 테이블에 "초보자용"페이지 추가

다음 페이지 연결

주의사항

사진에 표시된 전자 우편 주소는 실제 존재하지 않는다
Bulstrap은 Rails에 적용
참조: Rails 응용 프로그램에서 Bootstrap4-Qiita 사용

환경

rails:5.1.6

ruby:2.6.3p62

초기 코드

컨트롤러
app/controllers/users_controller.rb

### 以上略 ###
def index
  @users = User.all
end
### 以下略 ###

보기
app/views/users/index.html.erb

<div class="mt-2 mb-2 mr-5 ml-5 pr-5 pl-5">
  <table class="table table-sm table-hover">
    <thead class="thead-dark">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
          <td><%= link_to 'Show', user %></td>
          <td><%= link_to 'Edit', edit_user_path(user) %></td>
          <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

초기 화면과 원하는 화면

초기 화면
모든 사용자 표시

구현하려는 화면 (1페이지)
20개 표시

원하는 화면 (2페이지)
모두 21건이기 때문에 두 번째 페이지는 하나밖에 없다

페이지 나누기 기능 구현

설치 섹션

kaminari로 페이지 나누기
다음 내용 을 추서 하다
Gemfile

gem 'kaminari'
gem 'kaminari-bootstrap'

설치gem
console

bundle install

컨트롤러per(num):num 표시할 때마다 몇 개 (이번에는 20개씩)
다음 차이를 참조하여 변경합니다.
app/controllers/users_controller.rb

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

보기paginate에 페이지 번호 보이기 (이번에는 책상 뒤에서)
app/views/users/index.html.erb

 <div class="mt-2 mb-2 mr-5 ml-5 pr-5 pl-5">
   <table class="table table-sm table-hover">
     <thead class="thead-dark">
       <tr>
         <th>Name</th>
         <th>Email</th>
         <th></th>
         <th></th>
         <th></th>
       </tr>
     </thead>

     <tbody>
       <% @users.each do |user| %>
         <tr>
           <td><%= user.name %></td>
           <td><%= user.email %></td>
           <td><%= link_to 'Show', user %></td>
           <td><%= link_to 'Edit', edit_user_path(user) %></td>
           <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
         </tr>
       <% end %>
     </tbody>
   </table>
+  <%= paginate @users %>
 </div>

화면(일부 생략)

페이지 연결이 이루어졌지만 촌스러워 보여서 사용하기 어렵다

모양 변경

다음은 사용자 정의 카미나리 파일 제작입니다.
console

rails g kaminari:views default

다음 내용이 표시되면 app/views 에서 kaminari 폴더가 생성됩니다.
결과

      create  app/views/kaminari/_paginator.html.erb
      create  app/views/kaminari/_prev_page.html.erb
      create  app/views/kaminari/_page.html.erb
      create  app/views/kaminari/_last_page.html.erb
      create  app/views/kaminari/_gap.html.erb
      create  app/views/kaminari/_first_page.html.erb
      create  app/views/kaminari/_next_page.html.erb

app/views/kaminari 생성된 파일 편집(주로 페이지-link 클래스 적용)
app/views/kaminari/_first_page.html.erb

<span class="first">
  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, :remote => remote, class: 'page-link' %>
</span>

app/views/kaminari/_last_page.html.erb

<span class="last">
  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, :remote => remote, class: 'page-link' %>
</span>

app/views/kaminari/_next_page.html.erb

<span class="next">
  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, :rel => 'next', :remote => remote, class: 'page-link' %>
</span>

app/views/kaminari/_page.html.erb

<% if page.current? %>
  <span class="page-item disabled">
    <%= link_to page, url, {class: 'page-link'} %>
  </span>
<% else %>
  <span class="page-item">
    <%= link_to_unless page.current?, page, url, {:remote => remote, class: 'page-link', :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
  </span>
<% end %>

app/views/kaminari/_prev_page.html.erb

<span class="prev">
  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, :rel => 'prev', :remote => remote, class: 'page-link' %>
</span>

가는 김에 머리글을 가운데에 두다
app/assets/stylesheets/application.scss

.pagination {
  justify-content: center;
}

화면(일부 생략)

페이지 나누기 기능 완료
Next와 Last 등을 생략한 일본어 방법

참고 자료

[rails] kaminari로 눈썹 만들기 - Qiita
[Rails] 카미나리의 사용법을 익혀라! -Pikawaka
Kaminari의 사용법 요약 - Hatena Blog

경품

추가 사항으로 다음과 같은 내용을 고려할 수 있다

페이지당 표시 건수를 20건으로 정하지만, 사용자가 표시 건수를 전환할 수 있기를 바란다

모두 몇 개인지 알고 싶습니다. 그 중 몇 개는 페이지 번호로 표시됩니다

이미지 (일부 생략)

사용자가 표시 횟수를 전환할 수 있는 기능

컨트롤러
app/controllers/users_controller.rb

 def index
-  @users = User.page(params[:page]).per(20)
+  @users = User.page(params[:page]).per(per_page)
 end

 ### 以下一部省略 ###

 private
+  def per_page
+    # 今回は5, 10, 20, 50, 100件で利用者が切り替えられるようにする（デフォルトは20）
+    %W[5 10 20 50 100].include?(params[:per]) ? params[:per] : 20
+  end

보기
app/views/users/index.html.erb

 <div class="mt-2 mb-2 mr-5 ml-5 pr-5 pl-5">
+  <div class="float-right">
+    表示件数：
+    <% [5, 10, 20, 50, 100].each do |per| %>
+      <% unless @users.limit_value == per %>
+        <%= link_to per, users_path(per: per), {class: 'mr-2'} %>
+      <% else %>
+        <a class="mr-2"><%= per %></a>
+      <% end %>
+    <% end %>
+  </div>
   <table class="table table-sm table-hover">
     <thead class="thead-dark">
       <tr>
         <th>Name</th>
         <th>Email</th>
         <th></th>
         <th></th>
         <th></th>
       </tr>
     </thead>
     <tbody>
       <% @users.each do |user| %>
 ### 以下略 ###

표시 개수 전환 화면 (일부 생략)
이번에 책상에 떴어요.
장소

전체 건수와 표시 건수 표시

보기
app/views/users/index.html.erb

 <div class="mt-2 mb-2 mr-5 ml-5 pr-5 pl-5">
+  <div class="float-left">
+    <%= "#{@users.count}件 / #{@users.total_count}件" %>
+  </div>
   <div class="float-right">
     表示件数：
     <% [5, 10, 20, 50, 100].each do |per| %>
       <% unless @users.limit_value == per %>
         <%= link_to per, users_path(per: per), {class: 'mr-2'} %>
       <% else %>
         <a class="mr-2"><%= per %></a>
       <% end %>
     <% end %>
   </div>
 ### 以下略 ###

전체 건수와 표시 건수 화면 표시
페이지당 표시 건수는 20건이지만 마지막 페이지는 하나이기 때문에 정확하게 표시됩니다(왼쪽 위)