Rails Endless Page / Infinite Scroll

Question

我正在使用 twitter bootstrap 和 will_paginate，我有一个表，我想在上面实现无限滚动。

那张桌子是固定长度的，已经可以滚动了。我最近关注了 Railscasts 第 114 集的修订版，但它对我不起作用。当我滚动到表格底部时，它说获取更多文章，但实际上并没有获取更多文章。

这是我的代码：

Articles.js.coffee：

jQuery ->
  if $('.pagination').length
          $(articles).scroll ->
                  url = $('.pagination .next_page').attr('href')
                  if url &&  $(articles).scrollTop() > $(document).height() -             
                  $(articles).height() + 585
                      $('.pagination').text('Fetching more players...')
                      $.getScript(url)
$(articles).scroll()

索引.js.erb：

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

我的控制器和表都称为文章。我不知道它是否不起作用，因为它是一个表格而不是整个页面。

如果我需要发布更多文件，请告诉我。

Answer 1

我通过关注 Railscasts 第 114 集弄清楚了这一点，但我必须做出一些改变才能使其发挥作用。

这是我的新代码：

文章.js.coffee

jQuery ->
   if $('.pagination').length
      $('#articles_table').scroll ->
              url = $('.pagination .next_page').attr('href')          
              if url &&  $('#articles_table')[0].scrollHeight -    
              $('#articles_table').scrollTop() < 700                  
                      $('.pagination').text('Fetching more users...')
                      $.getScript(url)
$('#articles_table').scroll()

索引.html.erb

<table class="table table-striped table-bordered span8 table-condensed"     
 id="articles_table" >
<thead class="header">
  <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Description</th>
      <th>Created_At</th>
  </tr>
</thead>
<tbody>
<%= render @articles %>

</tbody>

索引.js.erb

$('#articles_table').append('<%= j render(@articles) %>');
<% if @articles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@articles) %>');
<% else %>
$('.pagination').remove();
<% end %>

_article.html.erb

<tr>
      <td> <%= article_counter +1 %> </td>
      <td> <%= article.Title %> </td>
      <td> <%= article.Description %> </td>
      <td> <%= article.Created_At %> </td>
</tr>

我只需要对 javascript 进行一些更改，使其适合我，然后创建一个部分。javascript 的更改是因为我使用的是固定长度表而不是整个页面。