概要

ページング処理の実装をサポートしてくれる Gem です。
Slim での使用例をメモしています。

導入

Gemfile

gem 'kaminari'

bundle install

users_controller.rb

def index
  @users = User.page(7).per(50)
end

index.html.slim

= paginate @users

同一ページで複数のページネーション

param_name を指定して、個別にページ数を扱うようにします。

users_controller.rb

def index
  @a_users = User.where(status: 'a').page(params[:a_page])
  @b_users = User.where(status: 'b').page(params[:b_page])
end

index.html.slim

= paginate @a_users, param_name: 'a_page'
= paginate @b_users, param_name: 'b_page'

Ajax で更新

remote: true を指定すると Ajax が可能です。
Ajax のリクエストに対して、リストを再描画するような js を返却します。

users_controller.rb

def index
  @users = User.page(param[:page])
  respond_to do |format|
    format.html
    format.js
  end
end

index.html.slim

# users
  = render partial: 'users', locals: {users: @users}

index.js.slim

| $('#users').html('#{j render partial: 'users', locals: {users : @users}}');

_users.html.slim

- users.each do |user|
  / do something ...

= paginate users, remote: true

外部 API 連携

paginate_array を利用し、配列に対してページネーションを行います。

controller.rb

def index
  page = params[:page] || '1'

  limit = 10
  offset = (page.to_i - 1) * limit

  # limit, offset を受け取り、リストと最大件数を返すような API にリクエスト
  @items, pagination = request_external_api(limit, offset)
  total = pagination['total']

  @items = Kaminari.paginate_array(@items, total_count: total).page(page).per(limit)
end

index.html.slim

= paginate @items

Bootstrap 用の View に調整

Bootstrap のテーマを指定して、 View を生成します。

rails g kaminari:views bootstrap3 -e slim

以下のファイルが生成されます。
大枠の調整に関しては _paginator.html.slim を触る形になりそうです。

app/views/
└── kaminari
    ├── _first_page.html.slim
    ├── _gap.html.slim
    ├── _last_page.html.slim
    ├── _next_page.html.slim
    ├── _page.html.slim
    ├── _paginator.html.slim
    └── _prev_page.html.slim

設定調整

設定ファイルを生成します。

rails g kaminari:config

以下のファイルが生成されます。
それぞれデフォルト値がコメントされていますので、適宜調整していきます。

config/initializers/kaminari_config.rb

Kaminari.configure do |config|
  # config.default_per_page = 25
  # 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
end

paginate で個別に指定することも可能です。

index.html.slim

= paginate @users, window: 2

概要

導入

同一ページで複数のページネーション

Ajax で更新

外部 API 連携

Bootstrap 用の View に調整

設定調整

参考