Skip to content

Instantly share code, notes, and snippets.

@manemone
Last active February 26, 2017 06:32
Show Gist options
  • Save manemone/de3155d8ee1a20e064eb669239650890 to your computer and use it in GitHub Desktop.
Save manemone/de3155d8ee1a20e064eb669239650890 to your computer and use it in GitHub Desktop.
kaminari のページネーションリンクに Twitter Bootstrap 4 のスタイルを適用する ref: http://qiita.com/manemone@github/items/564c58ea59fb3450826c
%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
%li.page-item.gap
.page-link
= t('views.pagination.truncate').html_safe
%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
%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
%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.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
%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
% 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 # 前のページへのリンク
= paginate @users
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment