5

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

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

这是我的代码：

文章.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 %>

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

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

4

1 回答 1

3

我是按照 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()

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

于 2012-10-29T15:07:58.080 回答