[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 します。

Gemfile
gem 'kaminari'

Bootstrap v4 は、gem で導入しました。

Configuration

Config file を生成します。

% rails g kaminari:config

必要な値を設定します。

config/initializers/kaminari_config.rb
# 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 に設定を追加します。

config/locales/en.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}&nbsp;-&nbsp;%{last}</b> of <b>%{total}</b> in total"

設定を終えたら、サーバを再起動します。

Pagination

Controller

HTML 表示時にページネーションを表示したいので、format.html に渡す値に対して .page を追加します。

app/controllers/data_controller.rb
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 のような表示が得られます。

app/views/data/index.html.haml
%h2= page_entries_info @data
= paginate @data

以上で基本機能が有効化されます。

Bootstrap Styling

ページネーションに Bootstrap 4 のテーマをあて、表示を整えます。

% rails g kaminari:views bootstrap4 -e haml

実行後、app/views/kaminari 以下にファイルが生成されます。
テーマが自動で適用されます。