【Rails】 Ransak の検索結果を Pagyでページネイション
March 16, 2020

DEVELOPMENT

web
Rails

はじめに

Ruby on Rails で検索機能を実装する場合、

Ransakを使用すれば非常に簡単に検索機能を実装することができます。

それと合わせてページネーションをする際、主流はKaminariですが、PagyのほうがViewのカスタマイズが簡単だったりします(好みですが)。

そのRansakによる検索結果とPagyを同時に使用する場合の方法を紹介します。

環境

  • Rails6
  • Ruby 2.6.5

前提

  • Controller、Model,Viewの作成済み

例)ここでは、UserController.rb、にて、User Modelを対象に検索した内容を、index.html.slimにて表示してます

Ransak

  • Gemファイルに、
gem 'ransack'
  • インストール
$ bundle install --path vendor/bundle
  • Controller
def index
  @q = User.ransack(params[:q])
  @users = @q.result(distinct: true)
end
  • View

    = search_form_for @q do |f|
    = f.search_field :mail_or_user_name_cont, placeholder: "Username"

    mailとuser_name カラムを対象に検索する場合です。name対象とする場合は、

    = f.search_field :name_cont, placeholder: "Username"
## Pagy

- Gemファイルに、
```ruby
gem 'pagy'
  • インストール

    $ bundle install --path vendor/bundle
  • 設定ファイル

    config/initializers/pagy.rb

    を作成し、

    Pagy::VARS[:items] = 5 # 1ページに表示する件数を設定
  • Helper
module UsersHelper
  include Pagy::Frontend
end
  • View
- @users.each do |user|
  ....
  ...

ページネーション部分。html_safeを使う感じみたいです

= pagy_bootstrap_nav(@pagy).html_safe
  • Controller

    class UsersController < ApplicationController
    include Pagy::Backend

    先程のRansakの部分を修正

def index
  @q = User.ransack(params[:q])
  @pagy, @users = pagy @q.result(distinct: true).order('created_at DESC')
end

ransakの結果をpagyに渡すだけですね

  • Bootstrap適応する場合
config/initializers/pagy.rb

require 'pagy/extras/bootstrap'

を追加

= pagy_nav_bootstrap(@pagy)

よくこういう記述があるのですが、僕の環境では

= pagy_bootstrap_nav(@pagy).html_safe

最後に

意外と、pagyとransakを同時に使うサンプルが無かったので書いて置こうと思いました。

また、pagyはバージョンにより、少々記述が違うので、バージョンに注意が必要です。

また、pagyで.htmlsafeがないと、タグが表示されてしまい、検索してたところgithub上に、htmlsafeを使えと書いてありました。

他のバージョンだと必要ない場合もありそうです。

少しでも参考になれば幸いです。

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.