Результаты бесконечного свитка добавляются вместо добавления

Question

Я использую will_paginate драгоценный камень, чтобы разбить список пользователей на моей странице индекса пользователя. Эта нумерация страниц работает правильно, поэтому, когда я нажимаю на пользователей на странице 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 тэг

Изменить, чтобы включить 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