Railsでアニメーションを使ったページネーションがしたかった話
ページの切り替え時にアニメーションを使い
ページを切り替えるということがしたかったのでまとめ
Gemfile
に以下を記述し、bundle install
します。
gem 'kaminari'
kaminari自体でも、ページネーションは可能ですが、
今回は、一部の機能だけを使用します。
ページネーションをしたいだけであれば、普通にkaminariを使うことをオススメします。
controllerに、以下を記述。
def index @books = Book.page(params[:page]).per(5) end
page(params[:page])
で現在のページを取得し、対応したBookを取り出しています。
pre(5)
は、デフォルトの表示数を表しています。何もない場合は25表示されます。
また、対応モデルに以下を記述することで、デフォルト値を変更することも可能です。
paginates_per 10
ページネーションを使いたいだけなら
controllerに記述後、ビュー側に以下を記述すれば、ページネーションは完成します。
= paginate @books
今回、= paginate
は使用しません
ページネーションしたいところを、部分テンプレートにします
index.html.slim
に以下を記述。
#books
=render partial: 'book'
_book.html.slim
に以下を記述。
-unless @books.first_page? =link_to '<', books_path(page: @books.prev_page), remote: true -@books.each do |book| =book.title -unless @books.last_page? =link_to '>', books_path(page: @books.next_page),remote: true
first_page?
で最初のページかどうか、
last_page?
で最後のページかどうかを判断し
prev_page
next_page
でそれぞれ、
前のページと次のページに飛ばす処理をしています。
部分テンプレートだけを更新したいので、
remote: true
を使用し、Ajax処理をします。
最後に、index.js.erb
に以下を記述し、ページ切り替え時にアニメーションを使用します。
$('#books').fadeOut(300); function openPage(){ $('#books').html("<%= j (render 'book') %>"); $('#books').fadeIn(500); } setTimeout("openPage()", 300);