infinte scroll的结果是前置而不是附加

Question

我正在使用will_paginate gem在我的用户索引页面上分页用户列表。这个分页工作正常，所以当我点击第2页的用户时，我被带到那些用户。

但是，我在本网站的另一部分实现了“无限滚动”，它工作得很漂亮，所以我想对用户索引页面做同样的事情。当我向下滚动时，我希望新用户出现在页面1用户表的底部。目前我遇到的问题是用户没有在页面1的末尾“附加”用户，他们在页面1用户之上“预先”。

index.html.erb - users

<hr>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="main-box no-header clearfix">
        <div class="main-box-body clearfix">
          <div class="table-responsive">
            <table class="table user-list">
              <thead>
                <tr>
                  <th><span>User</span></th>
                  <th><span>Friends</span></th>
                  <th class="text-center"><span>Status</span></th>
                </tr>
              </thead>
                <div id="all-users" >
                  <%= render @users %>
                </div>
                <div id="infinite-scrolling">
                  <%= will_paginate %>
                </div>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

_user.html.erb

<tbody>
  <% unless user == current_user %>
    <tr>
      <td>
        <%= image_tag user.gravatar_url default: "retro" %>
        <%= link_to user.name, user_path(user) %>
      </td>
      <td><%= pluralize(user.friends.count, "Friend") %></td>
      <td class="text-center">
        <div id="friend-form">
          <%= render partial: 'friendships/friendships_status', locals: {user: user} %>
        </div>
      </td>
    </tr>
  <% end %>
</tbody>

相关CSS：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

.....

.user-list tbody td .user-subhead {
    font-size: 0.875em;
    font-style: italic;
}
.user-list tbody td .user-link {
    display: block;
    font-size: 1.25em;
    padding-top: 3px;
    margin-left: 60px;
}
a {
    color: #3498db;
    outline: none!important;
}
.user-list tbody td>img {
    position: relative;
    max-width: 50px;
    float: left;
    margin-right: 15px;
}

.table thead tr th {
    text-transform: uppercase;
    font-size: 0.875em;
}
.table thead tr th {
    border-bottom: 2px solid #e7ebee;
}
.table tbody tr td:first-child {
    font-size: 1.125em;
    font-weight: 300;
}
.table tbody tr td {
    font-size: 0.875em;
    vertical-align: middle;
    border-top: 1px solid #e7ebee;
    padding: 12px 8px;
}

如果它有用：

class UsersController < ApplicationController
  def index
    @users = User.all.paginate(page: params[:page], per_page: 15)
  end
end

我相信这个问题与我的CSS有关。当我查看“预先设定的”第2页结果时，它们似乎不属于table user-list类，而是由all-users id标记识别。

编辑以包含Javascript：

index.js.erb

$('#all-users').append('<%= j render(@users) %>');
<% if @users.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@users) %>');
<% else %>
    $(window).off('scroll');
    $('.pagination').remove();
<% end %>
<% sleep 1 %>

users.coffee

jQuery ->
    if $('.pagination').length
        $(window).scroll ->
            url = $('.pagination .next_page a').attr('href')
            if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
                $('.pagination').text("Fetching more users...")
                $.getScript(url)
        $(window).scroll