![](/img/trans.png)
[英]jQuery Endless page with will_paginate not working in Rails
[英]will_paginate with endless Scrolling | Rails4
這是解決方案
所以我正在使用will_paginate / Bootstrap Will Paginate with Endless Scrolling。
為了讓分頁工作:
1.)在我的控制器中,我更新了我的索引操作
@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)
2.)編輯我的索引視圖:
<%= will_paginate @clips%>
DONE
分頁工作得很好。
To Add Endless scrolling
我執行了與之前的Rails 3應用程序相同的步驟。
1.)編輯我的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.)使用以下命令創建index.js.erb:
$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.)將 format.js添加到我的Controller索引操作中
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.)我的_clip.html.erb包含div
<div class="clip-box clips-masonry" data-no-turbolink>
好的,我得到了我的更新問題,每個遇到這個問題的人,這就是解決方案。
如果有人喜歡使用JS / JQUERY:
$(window).scroll(function() {
var url;
// Checks if products are currently being loaded
if (window.pagination_loading) {
return;
}
// Grabs the URL from the "next page" button
url = $('.pagination .next_page').attr('href')
// Chckes if you're n height from the bottom
if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
// Variable to know that you are currently loading products
window.pagination_loading = true;
// Text while loading
$('.pagination').text('');
// Run the script
return $.getScript(url).always(function() {
return window.pagination_loading = false;
});
}
});
index.js.erb的:
$products = $('<%= j render(@products) %>')
$('#productsContainer').append( $products );
<% if @products.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
$('.pagination').remove();
<% end %>
index.html.erb
<div class="container">
<%= will_paginate @products %>
</div>
控制器:
respond_to do |format|
format.html
format.js
end
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.