「kaminari 非同期」で検索すると、ページネーションの"リンク先のページ"を非同期で表示する方法が出てきます。kaminariのREADMEで紹介しているのもコレです。
https://github.com/kaminari/kaminari
そうではなくて、"ページネーションのhtml要素"を非同期で後から出す方法の紹介です。
検索してもあまり出てこなかったんですよね。
(↑ページネーションのhtml要素)
Gemのバージョンはkaminari (1.2.1), rails (6.0.3.4)です。
なぜ非同期に?
普通にkaminariでページネーションの要素を出すときは、ビューで<%= paginate(@users) %>のように書きます。
でもこれ、最後のページが何ページ目なのか求めるために、「レコードの全件数を取得するクエリ」が流れるんです。
SELECT COUNT(*) FROM users;
この場合は軽そうですが、色々と検索条件を付けていくと重いクエリになりそうです。なのでページネーションの要素は非同期で表示させたい、というのが動機です。
実装
最初に全体像を載せます。Railsで、Userモデルのindexページ、という想定です。
resources :users
def index
users = User.all.page(params[:page]).per(3)
respond_to do |format|
format.html { @users = users.without_count }
format.json { render :json => view_context.paginate(users).gsub('.json', '') }
end
end
<div id="paginator"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const path = location.pathname + '.json' + location.search;
const paginator = document.querySelector('#paginator');
fetch(path).then(response => response.text()).then(html => {
paginator.insertAdjacentHTML('afterbegin', html);
})
})
</script>
解説
処理の流れを順に説明します。最初、usersコントローラーのindexアクションにhtmlのリクエストが来たら、モデルに.without_countメソッドを付けてからviewに渡します。
format.html { @users = users.without_count }
このメソッドをつけると、先程載せた「レコードの全件数を取得するクエリ」が発行されなくなります。
ページネーションの要素が付いてないhtmlが返され、同期処理は終わりです。
ここからが非同期です。返したhtml(内のjavascript)では、ページネーションの要素を非同期で要求します。
このときURLをlocation.pathname + '.json' + location.search;として、
「URLのパスの末尾をjsonに変えただけのURL」を送ります。元のパスが/users?age=10なら送るパスは/users.json?age=10です。
送られてきたリクエストは、同じくusersコントローラーのindexアクションに送られます。
URLに.jsonが付いているので、respond_toはformat.jsonの方が呼ばれます。
format.json { render :json => view_context.paginate(users).gsub('.json', '') }
view_contextはビューのインスタンスを返すメソッドです( https://apidock.com/rails/ActionView/Rendering/view_context )。 これを使うとビューのメソッドをコントローラー等から使うことができて、paginate(user)が呼べます。
ここで使う変数userにはwithout_countは付けていませんので、「レコードの全件数を取得するクエリ」が発行されます。
paginateメソッドで作られたページネーション要素ですが、formatがjsonだと(html以外だと)、リンクの末尾が.jsonとなってしまいます。ですのでgsubで消します。
出来上がったhtml文字列をjsonで包んで返します。
受け取ったjavascript側では、それを適当な要素にくっつければ完了です。
fetch(path).then(response => response.text()).then(html => {
paginator.insertAdjacentHTML('afterbegin', html);
})
非同期でページネーション要素を出せました。
(↓の例ではsleepを入れています)
いいですね、非同期。
この記事が誰かの役に立てればです。