kaminari의 페이지 네이션 링크 사용자 정의

Rails 로 페이지네이션을 실시하기 위한 정평 gem, 번개 .
페이지 네이션 링크를 view 에 표시하기 위한 도우미 (paginate) 도 준비되어 있어 매우 편리합니다.
이 도우미를 사용하여 기본적으로 출력되는 링크는 매우 간단하지만 템플릿을 사용자 정의하여 원하는 스타일로 변경할 수 있습니다.
이번에는 Twitter Bootstrap4 1 에 준비되어 있는 Pagination 구성 요소 의 스타일을 적용해 보았으므로, 순서를 메모해 둡니다.

스타일 미리보기

기본

사용자 정의 후

첫 페이지로 돌아가기 링크 표시/숨기기, 몇 페이지 끝까지 생략하지 않고 링크를 내는지 등의 세세한 설정은 도우미 옵션으로 변경할 수 있습니다. 2

환경

Ruby 2.3.0

Rails 4.2.3

kaminari 0.16.3

Bootstrap 4.0.0.alpha3

haml 4.0.7

gem 설치 / 설정

Rails 프로젝트를 이미 작성했다고 가정합니다.

Twitter Bootstrap 4

Bootstrap 4는 공식 gem을 제공합니다.
다음 페이지에 따라 Bootstrap을 설치/구성하십시오.
htps : // 기주 b. 코 m / twbs / 보오 tst 등

번개

kaminari 설치는 아래 공식 문서를 참조하십시오.

Gemfile 에 추가하여 bundle install 하면 됩니다.

페이지 네이션 링크의 맞춤 템플릿 출력

다음 명령은 페이지 네이션 링크의 뷰 템플릿을 app/views/kaminari로 확장합니다.

% rails g kaminari:views default -e haml

# erb な人はこちら:
% rails g kaminari:views default

% tree app/views/kaminari
app/views/kaminari/
├── _first_page.html.haml # 最初のページに戻るリンク
├── _gap.html.haml        # 省略されたページを示す表示（...）
├── _last_page.html.haml  # 最後のページヘのリンク
├── _next_page.html.haml  # 次のページへのリンク
├── _page.html.haml       # 1, 2, 3 など、各ページに飛ぶためのリンク
├── _paginator.html.haml  # 同じ他のテンプレートを呼び出すための親テンプレート
└── _prev_page.html.haml  # 前のページへのリンク

템플릿은 미세한 부분으로 나뉩니다.
이를 무시하고 Bootstrap의 Pagination 구성 요소가 요청하는 마크 업으로 변경하십시오.

템플릿 덮어쓰기

다음과 같이 덮어씁니다.

_first_page.html.haml

%li.page-item.prev{ class: "#{'disabled' if current_page.first?}" }
  = link_to (current_page.first? ? "#" : url), class: "page-link", "aria-label" => "First", :remote => remote do
    %span{"aria-hidden" => "true"} «
    %span.sr-only
      = t('views.pagination.first').html_safe

_gap.html.haml

%li.page-item.gap
  .page-link
    = t('views.pagination.truncate').html_safe

_last_page.html.haml

%li.page-item.next{ class: "#{'disabled' if current_page.last?}" }
  = link_to (current_page.last? ? "#" : url), class: "page-link", "aria-label" => "Last", :remote => remote do
    %span{"aria-hidden" => "true"} »
    %span.sr-only
      = t('views.pagination.last').html_safe

_next_page.html.haml

%li.page-item.next{ class: "#{'disabled' if current_page.last?}" }
  = link_to (current_page.last? ? "#" : url), class: "page-link", "aria-label" => "Next", :remote => remote do
    %span{"aria-hidden" => "true"} ›
    %span.sr-only
      = t('views.pagination.next').html_safe

_page.html.haml

%li.page-item{ class: "#{'active' if page.current?}" }
  = link_to url, class: "page-link", remote: remote do
    = page
    - if page.current?
      %span.sr-only (current)

_paginator.html.haml

= paginator.render do
  %nav.text-xs-center
    %ul.pagination.pagination-sm
      = first_page_tag
      = prev_page_tag
      - 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
      = last_page_tag

_prev_page.html.haml

%li.page-item.prev{ class: "#{'disabled' if current_page.first?}" }
  = link_to (current_page.first? ? "#" : url), class: "page-link", "aria-label" => "Previous", :remote => remote do
    %span{"aria-hidden" => "true"} ‹
    %span.sr-only
      = t('views.pagination.previous').html_safe

페이지 네이션 링크 출력

모델의 배열에 상당하는 객체를 인수로, 뷰로 paginate 헬퍼를 호출하면 OK.

= paginate @users

해당 페이지를 브라우저에서 열면 이전 스타일로 페이지 네이션 링크가 나올 것입니다.

참고문헌

Bootstrap 4 공식 문서

Bootstrap 3 공식 문서

kaminari 공식 문서

이번에는 Bootstrap 4를 사용하고 있지만 Bootstrap 3에서도 같은 마크 업으로 움직인다고 생각합니다. ↩

구체적인 예는 공식 문서에 정리되어 있습니다 : htps : // 기주 b. 코 m/아마츠다/카미나리 #헤르페 rs