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

Target

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 introduction ・ Introduction of Bootstrap3 -Login function implementation ・ Implementation 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

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 **

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: "«the first"
      last: "last»"
      previous: "‹Before"
      next: "Next›"
      truncate: "..."

★ 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: "..."