Javascript 如何制作will_paginate'；在Rails 5中使用无刷新搜索的无限滚动工作？

几天来，我的团队一直试图让will_paginate的无限卷轴搜索不刷新页面，但到目前为止，我们只设法使其中任何一个正常工作，而且令人沮丧的是，问题似乎只存在于一行代码中

# All of index.js.erb

$("#cards").html("<%= escape_javascript(render(@cards)) %>");

$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

#所有index.js.erb
$（“#卡片”）.html（“”）；
$（“#卡片”）。附加（“”）；
$（'.pagination'）。替换为（''；
$（窗口）.off（'scroll'）；
$（'.pagination'）.remove（）；

当第一行被删除时，无限滚动效果很好，但搜索按钮会将结果添加到下一页，而不会删除屏幕上已有的结果

有了第一行，屏幕上的所有卡片都被移除，新的卡片在第一页的结果中如预期的那样出现，但是下一页根本不会加载无限卷轴

最后

我相信如果有一种方法可以让第一行只在按下搜索按钮后运行，它会解决问题，但是我们在理解.js.erb代码的工作原理方面确实有很多问题

---

某些代码可能相关，也可能不相关：

# Search button in index.html.erb

<%= form_tag(report_index_url, method: :get, remote: true) do %>
  <div class="row">
  <input id="search" name="search" class="..." type="search" >
  <button onclick="topFunction()" class="..." type="submit"></button>
  </div>
<% end %>


# Index method in report_controller

@cards = Card.from_user(@current_user.id)

apply_filters
execute_search

@cards = @cards.paginate(page: params[:page], per_page: 10)

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


# Entire report.coffee

$ ->
  if $('.pagination').length && $('#cards').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
        $.getScript(url)
    $(window).scroll()

#index.html.erb中的搜索按钮
#报表控制器中的索引方法
@cards=来自用户的卡片（@current\u user.id）
应用过滤器
执行搜索
@卡片=@cards.paginate（第页：参数[：页]，每页：10）
回应待办事项|格式|
format.html
format.js
结束
#整个报告。咖啡
$ ->
如果$（'.pagination'）.length&$（'#cards'）.length
$（窗口）。滚动->
url=$（'.pagination.next_page'）.attr（'href'））
如果url&&$（窗口）.scrollTop（）>$（文档）.height（）-$（窗口）.height（）-60
$（'.pagination'）.html（''）；
$.getScript（url）
$（窗口）。滚动（）