ruby-on-rails – Rails Endless Page / Infinite Scroll

发布时间：2020-12-17 02:19:13 所属栏目：百科来源：网络整理

导读：我正在使用twitter bootstrap和will_paginate,我有一个表,我希望实现无限滚动. 该表是固定长度并且已经滚动.我最近关注了Railscasts第114集的修订版,但它对我不起作用.当我滚动到表格的底部时,它说要获取更多文章,但它实际上并没有获取更多文章. 这是我的代

我正在使用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 %>

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

如果我需要发布更多文件,请告诉我.

解决方法

我通过跟踪轨道广播第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的更改是因为我使用的是固定长度的表而不是整个页面.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!