5

Twitter のブートストラップと will_paginate を使用しており、無限スクロールを実装したいテーブルがあります。

そのテーブルは固定長で、すでにスクロールしています。最近、Railscasts Episode #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 %>

私のコントローラーとテーブルは両方とも Articles と呼ばれます。ページ全体に対してテーブルであるため、機能していないかどうかはわかりません。

さらにファイルを投稿する必要がある場合はお知らせください。

4

1 に答える 1

3

Railscasts のエピソード 114 に従って解決しましたが、機能させるためにいくつかの変更を加える必要がありました。

ここに私の新しいコードがあります:

記事.js.コーヒー

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 に答える