クズと天才は紙一重

不定期更新です。主に日々の活動記録( ・ㅂ・)و ̑̑

Railsでアニメーションを使ったページネーションがしたかった話

RailsのページネーションをAjaxで処理し、

ページの切り替え時にアニメーションを使い

ページを切り替えるということがしたかったのでまとめ

 

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_pagenext_pageでそれぞれ、

前のページと次のページに飛ばす処理をしています。

部分テンプレートだけを更新したいので、

remote: trueを使用し、Ajax処理をします。

 

最後に、index.js.erbに以下を記述し、ページ切り替え時にアニメーションを使用します。

$('#books').fadeOut(300);
function openPage(){
 $('#books').html("<%= j (render 'book') %>");
 $('#books').fadeIn(500);
}
setTimeout("openPage()", 300);