페이지 나누기

화면에 표시되는 기록 건수가 많아지면 눈으로 확인하기가 어려워진다.이 문제를 피하는 방법은 페이지 정렬이다.
페이지 나누기는 기록 건수가 일정 수량을 초과할 때 여러 페이지로 나누어 표시하는 것을 말한다.

kaminari 설치

kaminari는 Rails에서 페이지를 나누는 gem입니다.이번에는 이걸로 페이지 연결을 하겠습니다.
우선gem 파일에 다음과 같은 내용을 추가합니다.
Gemfile

gem 'kaminari'

bundle 명령을 사용하여kaminarigem를 설치합니다.

$ bundle

페이지 번호에 해당하는 범위 데이터 검색

PostsController의 색인 작업을 변경합니다.
이 동작은 페이지 번호를params[:page]로 전달한다고 가정합니다.페이지 번호로 데이터 범위를 검색하는 기능은kaminari의 페이지 역할 영역에서 간단하게 진행할 수 있습니다.
다음과 같이 색인 작업을 수정합니다.
app/controllers/posts_controller.rb

  def index
    @posts =Post.page(params[:page])
  end

뷰에 페이지 정렬 정보 표시

보기에서 페이지 나누기에 사용할 다음과 같은 정보를 볼 수 있습니다.

현재 표시되는 페이지의 정보입니다

다른 페이지로 이동하는 데 사용됩니다

모든 데이터가 얼마나 되는지

1과 2는 paginate, 3은 page_entries_info라는 카미나리 보조 방법을 사용할 수 있습니다.
그러면 보기를 다음과 같이 변경합니다.

…
= link_to '新規投稿', new_post_path, class: 'btn btn-primary'

.mb-3
  =paginate @posts
  =page_entries_info @posts

table.table.table-hover
…

페이지 정보를 표시하는 프레임워크로 CSS 클래스가 있는 div 요소 mb-3,paginate 조수,page_entries_info 조수를 호출하고 있습니다.

번역 파일 추가

카미나리가 준비한 번역 파일은 en(영어)뿐이기 때문에 다음과 같은 내용으로 ja의 번역 파일을 준비합니다.
config/kaminari.ja.yml

ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "…"
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: "%{entry_name}がありません"
          one: "1件の%{entry_name}が表示されています"
          other: "&{count}件の%{entry_name}が表示されています"
      more_pages:
        display_entries: "全%{total}件中 %{first} - %{last}件の%{entry_name}が表示されています"

설계 조정

기능이 설치되어 있지만 아직 외관이 별로여서 수정해야 합니다.응용 프로그램에paginate 조수가 표시할 일부 템플릿을 준비하면 자유롭게 사용자 정의할 수 있습니다.일부 템플릿은kaminari가 제공하는 생성기에 의해 생성됩니다. 이때 테마(Thema)라고 불리는 디자인 종류를 지정하여 좋아하는 부분 템플릿을 생성할 수 있습니다(https://github.com/amatsuda/kaminari_themes)。
이번에 테마가bootstrap4인 일부 템플릿을 생성합니다.

$ bin/rails g kaminari:views bootstrap4

app/views/kaminari 산하에 보기 템플릿을 몇 개 추가했습니다.
그리고 localhost: 3000을 방문하면...

무사히 멋있어졌어요!

참고 자료

현장에서 사용하는 Ruby on Rails5 속습 실습 가이드