「もっと見る」でページネーションを非同期（Ajax）で実装する

はじめに

やりたいこと

「もっと見る」を押すことで次の記事が出るようにしたい

やってみて

JavaScriptが苦手な僕でも、簡単に実装することができました。
今回はjQueryで実装しています。

実装画面

実装例

Output App

参考

kaminari徹底入門
t-taira blog > Railsで「もっと見る」の実装

※情報のソースが古く、かつ私のGemの理解及びjQueryの理解が乏しいため、適切ではない表現が含まれているかもしれません。

手順

Gem kaminari インストール

Gemfile

gem 'kaminari'

Controllerにメソッド追加

controllers/items/controller.rb

class ItemsController < ApplicationController

  def index
    @items = Item.all.order('created_at DESC').page(params[:page])
  end

end

kaminariをインストールすると
.page(params[:page])
こちらの記述でページネーションを組むことができます。

１ページ毎の取得件数を指定

Controllerに指定する場合

controllers/items/controller.rb

class ItemsController < ApplicationController

  def index
    @items = Item.order('created_at DESC').page(params[:page]).per(10)
  end

end

Modelに指定する場合

models/item.rb

class Item < ApplicationRecord
  paginates_per 10
end

View

each展開箇所を部分テンプレートに切り出す

views/items/index.html.erb

# @items リスト展開

<%= render "shared/item-list" %>

# // @items リスト展開

views/shared/_item-list.html.erb

<% @items.each do |item| %>

# 中略

<% end %>

jQueryで読み込むためにidをつける

views/items/index.html.erb

# @items リスト展開

<div id='item-pagenate'>
  <%= render "shared/item-list" %>
</div>

# // @items リスト展開

ページネーションリンクを作る

views/items/index.html.erb

# @items リスト展開

<div id='item-pagenate'>
  <%= render "shared/item-list" %>
</div>

<%= link_to_next_page @items, 'もっと見る', remote: true, class: 'more-link', id: 'more-link' %>

# // @items リスト展開

kaminariをインストールすると
link_to_next_page
こちらの記述でページネーションのリンクが作れます。

また、remote: trueを付与することでサーバーに送られるデータがjson形式となり非同期通信が可能となります。

jQuery側の処理を記述

json形式のデータを受け取り、返す処理の内容を記述します。

views/items/inde.js.erb

$('#item-pagenate').append("<%= escape_javascript(render 'shared/item-list', object: @items) %>")
$("#more-link").replaceWith("<%= escape_javascript(
  link_to_next_page(@items, 'もっと見る', remote: true, class: 'more-link', id: 'more-link')
) %>");

一行目で id : 'item-pagenate'の部分にappend（引数を追加するメソッド）を用いて次ページ分の@itemsを渡した部分テンプレートを挿入しています。
二行目以降では、さらに次のページ分のリンクを表示させるための記述をしています（replaceWithで元々存在しているリンクを置き換えています）

以上で、「もっと見る」スタイルのページネーションは完成です！

おわりに

jQueryが勉強不足ゆえ、メソッドの意味を一つ一つ調べながら解説したつもりですが、間違っていたり情報が古かったらごめんなさい。

ただ、基本的にはこちらの記述で実装はできるはずなので、うまく表示されないのであれば

• jQueryの設定がそもそも出来ていない
• 部分テンプレート（renderメソッド）の記述に誤りがある

のどちらかが疑わしいと思います。

私はファイル名の誤記というシンプルなミスで無駄な時間を消費しました。

お気をつけください。

✔︎