【슈퍼 간단】kaminari를 사용해 페이지 네이션을 구현하자!

kaminari를 이용해 페이지네이션을 구현합니다.
이번에도 초보자용으로 레시피 투고 앱을 예로 작성하겠습니다.

완성 이미지

kaminari란?

kaminari는 페이지 네이션을 쉽게 구현할 수있는 Gem입니다.

페이지 네이션 구현

kaminari 설치

우선 kaminari를 설치합니다.

Gemfile

gem 'kaminari'

터미널

bundle install

페이지 네이션 설정

페이지 네이션의 기본적인 설정을 실시합니다.

예를 들어, 다음과 같은 코드가 있다고 가정합니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.all
  end

여기를 페이지 메소드를 사용해 페이지 네이션 해 갑니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.page(params[:page])
  end

뷰에 페이지네이션을 표시하고 싶은 장소에 paginate 메소드를 사용합니다.

app/views/recipes/index.html.erb

<div class="recipes-index">
  <% @recipes.each do |recipe| %>
    <div class="recipe-contents d-flex">
      <% if recipe.images.present? %>
        <%= image_tag recipe.images[0], class: "index-img" %>
      <% else %>  
        <%= image_tag "no_image.png", class: "index-img" %>
      <% end %>
      <div class="recipe">
        <div class="recipe-title">
          <%= link_to recipe.title, recipe_path(recipe) %>
        </div>
        <div class="recipe-content">
          カテゴリー: <span class="recipe-category"><%= recipe.category.name %></span>
          所要時間: <span class="recipe-time"><%= recipe.time_required.name %></span>
        </div>
      </div>
    </div>
  <% end %>
//ここから追記
  <div class="painate">
    <%= paginate @recipes %>
  </div>
//ここまで追記
</div>

이것으로 일단은 구현 완료입니다.
여기를 사용자 정의합니다.

1 페이지의 표시 건수를 바꾸자!

디폴트의 ​​설정이라고 1페이지 25건 표시되므로, 표시 건수를 변경해 봅시다.
변경하려면 per 메소드를 사용합니다.

per 메소드에서 5건 표시로 변경합니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.page(params[:page]).per(5)
  end

아래 그림과 같이 표시되면 성공입니다.

외형을 변경합시다!

간단한 외형에서 조금 디자인을 제공합니다.
이번에이 레시피 앱에는 bootstrap을 사용하고 있기 때문에 bootstrap처럼 커스터마이징합니다.
덧붙여 bootstrap의 도입에 대해서는 전회 기사로 하고 있으므로, 보실 수 있으면(자) 생각합니다.

다음 명령으로 쉽게 사용자 정의할 수 있습니다.

터미널

rails g kaminari:views bootstrap4

이 명령을 실행하면 app/views에 kaminari 폴더와 파일이 만들어져 편집하지 않아도 외형이 변경됩니다.

이상으로 완성됩니다.
거동을 확인해 봅시다.

리팩토링

방금 per 메소드를 사용해 1 페이지의 표시 건수를 변경했습니다.

예를 들면 다음과 같이 복수의 페이지로 페이지 네이션 기능을 사용하는 경우, 같은 기술을 몇번이나 조금 코드도 길어져 버립니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.page(params[:page]).per(5)
  end

  def result
    @results = @q.result.page(params[:page]).per(5)
  end

어느 페이지에서도 1 페이지의 표시 건수가 변하지 않는 경우는 모델에 paginates_per 라고 기술해 디폴트의 값을 결정합니다.

app/models/recipe.rb

class Recipe < ApplicationRecord
#中略
  paginates_per 5
#以下略
end

컨트롤러에서 per 메소드를 제거합니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  def index
    @recipes = Recipe.page(params[:page])
  end

  def result
    @results = @q.result.page(params[:page])
  end