will_paginate与无尽的滚动| Rails4

这是解决方案

所以我正在使用will_paginate / Bootstrap Will Paginate with Endless Scrolling。

为了让分页工作：

1.）在我的控制器中，我更新了我的索引操作

@clips = Clip.order("created_at desc").page(params[:page]).per_page(20) 

2.）编辑我的索引视图：

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 = $('') $('#clips-masonry').append( $boxes ).imagesLoaded( function(){ $('#clips-masonry').masonry( 'reload'); });  $('.pagination').replaceWith('');  $('.pagination').remove();  

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

Answer 1

好的，我得到了我的更新问题，每个遇到这个问题的人，这就是解决方案。

Answer 2

如果有人喜欢使用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

 
 <%= will_paginate @products %>  

控制器：

  respond_to do |format| format.html format.js end