Javascript 将以无休止的滚动方式分页

这就是解决方案

因此，我正在使用无休止的滚动

要使分页正常工作，请执行以下操作：

1。）在我的控制器中，我用

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

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

<%= will_paginate @clips%>

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 %>

4。）My\u 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 %>

---

有什么问题吗？无止境滚动分页代码可以工作（尽管它不是turbolinks友好型）-如果列出错误，您可能会了解一些情况。问题是它不工作：），没有错误，无止境只是不工作：（我认为这与我必须包含在控制器中的format.js有关。但是在Rails 4中，控制器发生了变化，我无法让它工作。对我来说，它工作得很好，我仍然使用respond_来阻止format.js。日志中的事件调用什么，html？类似于

clips？page=2

with

ClipsController\ind例如HTML

？你能从你的控制器索引动作中给我发一个粘贴箱或要点，让我看看你是如何写下来的吗？是的剪辑？page=2等等。当然，它很简单-

$(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;
    });

  }
});

$products = $('<%= j render(@products) %>')

$('#productsContainer').append( $products );

<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>

<div class="container">
    <%= will_paginate @products %>
</div>   

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