Question

I currently have a working table that is sorted by several select boxes. I recently implemented endless/infinite scrolling by following this tutorial: http://railscasts.com/episodes/114-endless-page-revised?view=asciicast

The tutorial worked after a couple of changes, but I have one problem. I am using a counter for the first column, but the problem is that every time it loads the next page, the counter resets to 1, so the counter is like 1..2..3.. all the way to 50, but when I scroll to the bottom, it resets to 1. I am currently displaying 50 records at the start and 50 more each time the user scrolls down to the bottom. I would like the next records to be 51…52…53…etc. Then the next time you scroll to the bottom, start at 101 then 102…103…104…etc., like for example a ranking list.

To get the partial I followed this tutorial which also told me how to make the counter column:
http://xianese.blogspot.com/2008/06/render-collection.html

After doing some research, I figured out that the counter I am using is pretty much undocumented, and several people have reported a pagination issue with it, which means that it is not just an issue with infinite scrolling, but with pagination (I am using will_paginate). On one website, a person said that they had solved the pagination issue, but then did not say how, and the post is now closed, so I know that there is a way to fix this issue.

This is a link to that website:
http://www.pgrs.net/2007/07/20/render-partial-with-collection-has-hidden-counter/

Anything that could help me would be greatly appreciated.

Here is my code:

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>

Thanks,

Jack

Answer 1

After a ton of research, I came upon this stack overflow post which was different than mine because it was using an index, but the code worked for me!
persistent counter in Ruby/Rails for each

Here is the code that I added to _article.html.erb:

<% if params[:page].nil? || params[:page] == "0" || params[:page] == "1" %>
  <% x = 0 %>
<% else %>
  <% page = params[:page].to_i - 1 %>
  <% x = page * 50 %>
<% end %>

I just added an x to it so it’s: article_counter + x + 1, with x being defined in the above code. Here is what the whole file looks like:

<% if params[:page].nil? || params[:page] == "0" || params[:page] == "1" %>
      <% x = 0 %>
    <% else %>
      <% page = params[:page].to_i - 1 %>
      <% x = page * 50 %>
    <% end %>
<tr>
      <td> <%= article_counter +1 %> </td>
      <td> <%= article.Title %> </td>
      <td> <%= article.Description %> </td>
      <td> <%= article.Created_At %> </td>
</tr>