自動で次のページに移行
ページネーションを実装して思うことは、最近は次へボタンなんて存在せず、スクロールするとどんどん新しい商品やツイートが表示されたりするということだ。
今回はそれを実装する。
使うのは、gem'kaminari'（ページネーション機能） + プラグイン”jScroll”（無限スクロール）である。
まずはgem'kaminari'でページネーションを実装
参考になるページはここです。
【Rails初心者】ページネーションを実装して自分好みにデザインを変える
gem 'kaminari'
gemを追記したら
$ bundle install
インストールが完了したら、コントローラーに記述する。
class UsersController < ApplicationController
def index
@products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).per(1)
#.page(params[:page]).per(1)は１ページ、１つのproductだけ表示の意味
end
end
次はページネーションの次へ、戻るなどのボタンを表示させる。
= render 'shared/main-header'
.container-fluid
.row.py-5.w-100
= render 'shared/side'
.col-8.main
.jscroll
= render partial: 'user', collection: @products, as: "product", class: "jscroll"
.skill-list
= paginate @products # ここを追加するだけ
これでページネーションの実装完了です。
kaminariは遅いので、加工します。
kaminariは便利ですが、読み込みが10秒ぐらいかかって非常に重い。
だから、記述を変えます。
参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要
class UsersController < ApplicationController
def index
@products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).without_count.per(1)
# .without_countを追加しています
end
end
.without_countを追加することで、本来のkaminariの機能は使えなくなります。
次へボタンと戻るボタンは表示可能です。
= render 'shared/main-header'
.container-fluid
.row.py-5.w-100
= render 'shared/side'
.col-8.main
.jscroll
= render partial: 'user', collection: @products, as: "product", class: "jscroll"
.skill-list
// = paginate @products これを削除して、下記を追加
= link_to_prev_page @products, '前のページ', class: "prev"
= link_to_next_page @products, '次のページ', class: "next"
これで戻るボタンと次へボタンを表示させました。
1秒ほどで、ページを開けるようになりましたね！！
では、本題の下にスクロールすると、勝手に次のページに移行するようにしましょう！！
無限スクロール
jScrollのインストール
CDNで追加する場合
スクリプトを読み込ませて簡単に導入しましょう！
%head
%script{src: "https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}
直接JSファイルを導入する場合
jscrollのGithubからダウンロードしよう。
ZIPファイルを解答したら、
jquery.jscroll.min.jsをasset/javascripts配下におきます。
そしたら、jScrollを読み込ませるようにします
//= require jquery.jscroll.min.js
実はここが失敗が起こりやすい箇所です！！！！
解説します
私は下記のようにしてます
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery.jscroll.min.js
//= require popper
//= require bootstrap-sprockets
重要なのはここです。
//= require jquery
//= require jquery.jscroll.min.js
これだけだとエラーなく利用できます。
Uncaught TypeError: $(...).jscroll is not a function
// 「.jscrollってイベント処理なんて、知らねえぞええぞゴラアアアアアアア！！」と怒られます。これに苦戦しましたね。
間違えて下記にしてしまうと使えません
//= require jquery
//= require jquery.jscroll.min.js
//= require jquery3
//= require jquery と //= require jquery3が入っていて、
エラーが起こるパターンです。
もしも複数入っている場合、片方消しましょう。
jQueryで無限スクロールの処理作成
では続きを進めていきます。
それではjQueryで無限スクロールの処理を作成します。
$(document).on('turbolinks:load', function() {
$('.jscroll').jscroll({
// 無限に追加する要素は、どこに入れる？
contentSelector: '.jscroll',
// 次のページにいくためのリンクの場所は？ ＞aタグの指定
nextSelector: 'a.next',
// 読み込み中の表示はどうする？
loadingHtml: '読み込み中'
});
});
これでdiv.jscrollをスクロールすると.jscrollに次のページの要素を追加するよ。ということになります
詳しいオプションは下記のサイトが参考になります。
無限スクロールのプラグイン「jScroll」の使い方
これで完了です！！
エラーが難しかったですが、原因がわかってよかったです。
参考リンク
kaminari系
【Rails初心者】ページネーションを実装して自分好みにデザインを変える
gem'kaminari'のオプション
参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要
無限スクロール系
kaminari + jscrollを使った無限スクロールの実装
無限スクロールのプラグイン「jScroll」の使い方
Github:jscroll