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()

index.js.erb的：

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

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

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

Answer 1

我通过跟踪轨道广播第114集来解决这个问题，但我必须做一些改变才能使其发挥作用。

这是我的新代码：

<强> articles.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()

<强> index.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>

<强> index.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的更改是因为我使用的是固定长度的表而不是整个页面。

Rails Endless Page / Infinite Scroll

1 个答案: