[Rails] Add page nation to table [For beginners]

Implement the following page nation

Note

The email address shown in the image is not real Bootstrap is applied to Rails

Reference: Using Bootstrap 4 with Rails App --Qiita

environment

• rails：5.1.6
• ruby：2.6.3p62

Initial code

controller

app/controllers/users_controller.rb

###Above omitted###
def index
  @users = User.all
end
###The following is omitted###

View

erb: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>

Initial screen and screen you want to realize

All Users are displayed

Display 20 items at a time

Since there are 21 cases in total, only one case is on the second page.

Pagination function implementation

Implementation part

Use kaminari to achieve pagination Add the following

Gemfile

gem 'kaminari'
gem 'kaminari-bootstrap'

Install gem below

console

bundle install

controller per (num): How many nums are displayed (every 20 this time) Changed with reference to the following differences

app/controllers/users_controller.rb

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

** View ** Pagination is displayed where you wrote paginate (this time it is behind the table)

diff: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>

Pagination has been achieved, but it looks ugly and difficult to use.

Change in appearance

Create a file to customize kaminari below

console

rails g kaminari:views default

If you see the following, you have a kaminari folder in app/views

result

      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

Edit the file generated in app/views/kaminari (mainly apply page-link class)

erb: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>

erb: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>

erb: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>

erb: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 %>

erb: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>

By the way, center the pagenation

app/assets/stylesheets/application.scss

.pagination {
  justify-content: center;
}

Pagination function completed Japanese localization methods such as Next and Last are omitted.

reference

[Rails] Create pagination using kaminari --Qiita [Rails] Let's master how to use kaminari! --Pikawaka Summary of how to use Kaminari --Hatena Blog

bonus

The following can be considered as additional requirements

――We decided to display 20 items per page, but we want to allow users to switch the number of items displayed. ――I want to know how many cases are displayed in total and how many of them are displayed in page nations.

A function that allows the user to switch the number of displayed items

controller

app/controllers/users_controller.rb

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

 ###Some parts are omitted below###

 private
+  def per_page
+    #This time 5, 10, 20, 50,Allow users to switch in 100 cases (default is 20)
+    %W[5 10 20 50 100].include?(params[:per]) ? params[:per] : 20
+  end

View

diff:app/views/users/index.html.erb

 <div class="mt-2 mb-2 mr-5 ml-5 pr-5 pl-5">
+  <div class="float-right">
+Displayed results:
+    <% [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| %>
 ###The following is omitted###

This time I displayed it on the table Place as you like

Total number and display number display

View

diff: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}Case/ #{@users.total_count}Case" %>
+  </div>
   <div class="float-right">
Displayed results:
     <% [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>
 ###The following is omitted###

The number of items displayed per page is set to 20, but since the last page is only one item, it is displayed correctly (upper left).