will_paginate 无限滚动 |Rails4 [英] will_paginate with endless Scrolling | Rails4
问题描述
这就是解决方案
所以我使用 will_paginate/Bootstrap 将分页无限滚动.
要使分页正常工作:
1.) 在我的控制器中,我用
更新了我的索引操作@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)
2.) 编辑我的索引视图:
<%= will_paginate @clips%>
完成
分页效果很好.
添加无限滚动
我做了与我之前的 Rails 3 应用程序相同的步骤.
1.) 编辑我的 clips.js.coffee
jQuery ->$('#clips-masonry').imagesLoaded ->$('#clips-masonry').masonry itemSelector: ".clips-masonry" # 那是我的砌体if $('.pagination').length # 这就是无限滚动$(window).scroll ->url = $('.pagination .next_page a').attr('href')如果网址 &&$(window).scrollTop() >$(document).height() - $(window).height() - 50# 在页面底部做什么$('.pagination').text("获取更多剪辑...")$.getScript(url)$(窗口).滚动()
2.) 使用以下命令创建 index.js.erb:
$boxes = $('<%= j render(@clips) %>')$('#clips-masonry').append($boxes).imagesLoaded(function(){$('#clips-masonry').masonry('重装');});<% if @clips.next_page %>$('.pagination').replaceWith('<%= j will_pagination(@clips) %>');<%其他%>$('.分页').remove();<%结束%>
3.) 将 format.js 添加到我的控制器索引操作
def 索引@clips = Clip.order("created_at desc").page(params[:page]).per_page(12)response_to do |格式|格式.html格式.js结尾结尾
4.) 我的 _clip.html.erb 用 div 包裹
解决方案 好的,我用我的更新问题解决了这个问题,每个偶然发现这个问题的人,这就是解决方案.
THIS IS THE SOLUTION
So i'm using will_paginate / Bootstrap Will Paginate with Endless Scrolling.
To get the Pagination working:
1.) In my Controller i updated my index action with
@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)
2.) Edit my index view:
<%= will_paginate @clips%>
DONE
Pagination works just fine.
To Add Endless scrolling
i did the same steps as in my previous Rails 3 App.
1.) Edit my clips.js.coffee
jQuery ->
$('#clips-masonry').imagesLoaded ->
$('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry
if $('.pagination').length # Thats for the Endless Scrolling
$(window).scroll ->
url = $('.pagination .next_page a').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
# What to do at the bottom of the page
$('.pagination').text("Fetching more Clips...")
$.getScript(url)
$(window).scroll()
2.) Create an index.js.erb with:
$boxes = $('<%= j render(@clips) %>')
$('#clips-masonry').append( $boxes ).imagesLoaded( function(){
$('#clips-masonry').masonry( 'reload');
});
<% if @clips.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@clips) %>');
<% else %>
$('.pagination').remove();
<% end %>
3.) Added format.js to my Controller index action
def index
@clips = Clip.order("created_at desc").page(params[:page]).per_page(12)
respond_to do |format|
format.html
format.js
end
end
4.) My _clip.html.erb is wrapped with the div
<div class="clip-box clips-masonry" data-no-turbolink>
解决方案 Ok, i got it working with my Updated Question, everyone who stumbles upon this problem, This is the solution.
这篇关于will_paginate 无限滚动 |Rails4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文