[Ruby on Rails 5] Ransack + Kaminari + Bootstrap4 でページネーションを機能させる
セットで利用することが多い Kaminari と Bootstrap の導入について、かんたんにまとめました。
Rails 5.1.4
ransack 1.8.6
kaminari 1.1.1
こちらを参考にさせて頂きました。
Contents
rails generate
省略。下記の続きです。
この記事では TSV 出力を実装しています。
さらに Ransack を導入しました。
Installation
bundle install
します。
gem 'kaminari'
Bootstrap v4 は、gem で導入しました。
Configuration
Config file を生成します。
% rails g kaminari:config
必要な値を設定します。
# frozen_string_literal: true
Kaminari.configure do |config|
config.default_per_page = 5
# 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
さらに I18n 情報を追記しておきます。
必要であれば ja.yml に設定を追加します。
en:
views:
pagination:
first: "« First"
last: "Last »"
previous: "‹ Prev"
next: "Next ›"
truncate: "…"
helpers:
page_entries_info:
one_page:
display_entries:
zero: "No %{entry_name} found"
one: "Displaying <b>1</b> %{entry_name}"
other: "Displaying <b>all %{count}</b> %{entry_name}"
more_pages:
display_entries: "Displaying %{entry_name} <b>%{first} - %{last}</b> of <b>%{total}</b> in total"
設定を終えたら、サーバを再起動します。
Pagination
Controller
HTML 表示時にページネーションを表示したいので、format.html
に渡す値に対して .page
を追加します。
class DataController < ApplicationController
# GET /data
# GET /data.tsv
def index
@q = Datum.ransack(params[:q])
@data = @q.result(distinct: true)
respond_to do |format|
format.html { @data = @data.page(params[:page]) }
format.tsv { send_data @data.to_csv(col_sep: "\t"), filename: "data-#{Time.zone.now.strftime('%d%m%Y%H%M')}.tsv" }
end
end
View
paginate
ヘルパーを使って、ページネーションを表示します。
page_entries_info
ヘルパーを利用すると、Displaying data 1 - 5 of 23 in total
のような表示が得られます。
%h2= page_entries_info @data
= paginate @data
以上で基本機能が有効化されます。
Bootstrap Styling
ページネーションに Bootstrap 4 のテーマをあて、表示を整えます。
% rails g kaminari:views bootstrap4 -e haml
実行後、app/views/kaminari
以下にファイルが生成されます。
テーマが自動で適用されます。