[Rails] How to introduce kaminari with Slim and change the design

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3 -Login function implementationImplementation of posting function

Implementation

1. Introduce Gem

Gemfile


gem 'kaminari'

Terminal


$ bundle

2. Pagination settings

** ① When setting with the controller **

books_controller.rb


def index
  @books = Book.all.page(params[:page]).per(1)
end

.page(params[:page]) ➡︎ Specify the number of pages in pagination.

.per(5) ➡︎ Specify the number of items to be displayed per page. (Set to 1 in this case)

** ② When creating a configuration file separately **

Terminal


$ rails g kaminari:config

The following files are created in config / initializers.

kaminari_config.rb


# frozen_string_literal: true
Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end

スクリーンショット 2020-06-05 10.23.10.png

config.default_per_page ➡︎ Number of items displayed per page

config.max_per_page ➡︎ Maximum number of items displayed per page

config.window ➡︎ Set how many pages on the left and right to display links from the current page (image is set to 1)

config.outer_window ➡︎ Set how many pages of left and right links are displayed from the first and last pages.

config.left ➡︎ Set how many pages of links are displayed from the first page (image is set to 3)

config.right ➡︎ Set how many pages of links are displayed from the last page (image is set to 2)

config.page_method_name ➡︎ Set method name

config.param_name ➡︎ Set the parlor meter name

config.params_on_first_page ➡︎ Please tell me who knows what the settings are here.

3. Edit the view

slim:books/index.html.slim


/Postscript
= paginate @books

4. Create / edit kaminari view

** ① Create a view file with Bootstrap3 applied **

Terminal


$ rails g kaminari:views bootstrap3

** ② Centered **

Enclose in a div with the Bootstrap3 auxiliary class (text-center).

slim:kaminari/_paginator.html.sim


= paginator.render do
  /Postscript
  .text-center
    ul.pagination
      == first_page_tag unless current_page.first?
      == prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          == page_tag page
        - elsif !page.was_truncated?
          == gap_tag

      == next_page_tag unless current_page.last?
      == last_page_tag unless current_page.last?

** * If the display looks strange ** スクリーンショット 2020-06-05 10.57.22.png

If the above display is displayed, one = in _paginator.html.sim is missing, so edit it.

slim:kaminari/_paginator.html.sim


//Change before
= paginator.render do
  .text-center
    ul.pagination
      = first_page_tag unless current_page.first?
      = prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          = page_tag page
        - elsif !page.was_truncated?
          = gap_tag

      = next_page_tag unless current_page.last?
      = last_page_tag unless current_page.last?

//After change
= paginator.render do
  .text-center
    ul.pagination
      == first_page_tag unless current_page.first?
      == prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          == page_tag page
        - elsif !page.was_truncated?
          == gap_tag

      == next_page_tag unless current_page.last?
      == last_page_tag unless current_page.last?

5. Change the design

** ① Edit ʻapplication.rb` **

config/application.rb


module Bookers2Debug
  class Application < Rails::Application
    config.load_defaults 5.2
    config.i18n.default_locale = :ja #Postscript
  end
end

** ② Create ja.yml **

Terminal


$ touch config/locales/ja.yml

** ③ Edit ja.yml **

★ If you want to use Japanese

ja.yml


ja:
  views:
    pagination:
      first: "&laquo;the first"
      last: "last&raquo;"
      previous: "&lsaquo;Before"
      next: "Next&rsaquo;"
      truncate: "..."

スクリーンショット 2020-06-05 10.53.54.png

★ If you want to make it an icon

Install Font Awesome from the link below and edit ja.yml. How to install Font Awesome

ja.yml


ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "..."

スクリーンショット 2020-06-05 10.54.10.png

Recommended Posts

[Rails] How to introduce kaminari with Slim and change the design
[With back tricks] How to introduce React to the simplest Rails
How to build API with GraphQL and Rails
[Rails] How to create a table, add a column, and change the column type
How to change the action with multiple submit buttons
[Rails] How to change the column name of the table
[Rails] How to use "kaminari"
[Rough explanation] How to separate the operation of the production environment and the development environment with Rails
How to run React and Rails on the same server
How to change the file name with Xcode (Refactor Rename)
How to get started with slim
How to introduce jQuery in Rails 6
How to get along with Rails
[Rails] How to get the URL of the transition source and redirect
[Rails] How to change the page title of the browser for each page
[Rails 5] How to display the password change screen when using devise
How to change app name in rails
[Rails] How to use rails console with docker
[Rails] How to use the map method
How to change the timezone on Ubuntu
Ransack sort_link How to change the color!
How to find the tens and ones
[Rails 5.x] How to introduce free fonts
[Ruby on Rails] How to use kaminari
How to build Rails 6 environment with Docker
How to decorate the radio button of rails6 form_with (helper) with CSS
How to change the maximum and maximum number of POST data in Spark
(For beginners) [Rails] Time saving tech! How to install and use slim
[Rails] How to get the user information currently logged in with devise
How to compare only the time with Rails (from what time to what time, something like)
How to display the text entered in text_area in Rails with line breaks
I want to introduce the committee with Rails without getting too dirty
[Rails] How to apply the CSS used in the main app with Administrate
[swift5] How to change the color of TabBar or the color of item of TabBar with code
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Rails] How to decide the destination by "rails routes"
[Swift] How to link the app with Firebase
[Rails] How to easily implement numbers with pull-down
http: // localhost: How to change the port number
How to find the total score and average score
[Rails] How to build an environment with Docker
[Rails] How to get success and error messages
Rails scope anti-patterns and how to eliminate them
Try to summarize the common layout with rails
How to check Rails commands in the terminal
[Rails] How to easily introduce slick (slider function)
[Ruby on Rails] Change the update date and creation date to your favorite notation
How to use ToolBar with super margin Part1 Set characters and change colors
[Rails6] How to connect the posting function generated by Scaffold with the user function generated by devise
[Rails] How to register multiple records in the intermediate table with many-to-many association
Introduce Docker to the development environment and test environment of existing Rails and MySQL applications
[Rails] How to operate the helper method used in the main application with Administrate
How to share on the host side (windows) and guest side (CentOS 7) with VirtualBox
[Rails] devise customization. How to change the redirect page after user registration and editing, and how to skip password input when editing
How to set the display time to Japan time in Rails
[Rails] How to search by multiple values ​​with LIKE
How to write Rails
How to remove the underline displayed by Rails link_to
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
How to delete a new_record object built with Rails