#114 Endless Page (revised)

Dec 16, 2011 | 7 minutes | Ajax

Transform traditional pagination into infinite scrolling which will automatically fetch more records when the user scrolls down to the bottom of the page.

Click to Play Video ▶

Download:
source codeProject Files in Zip (86.7 KB)
mp4Full Size H.264 Video (17.9 MB)
m4vSmaller H.264 Video (9.39 MB)
webmFull Size VP8 Video (10.7 MB)
ogvFull Size Theora Video (20.9 MB)

Browse Source Code

Resources

Episode 51: will_paginate (revised)

          products.js.coffee
        
jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text("Fetching more products...")
        $.getScript(url)
    $(window).scroll()

          products/index.js.erb
        
$('#products').append('<%= j render(@products) %>');
<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>

Pagination Setup:

          Gemfile
        
gem 'will_paginate'

          products_controller.rb
        
def index
  @products = Product.order("name").page(params[:page]).per_page(10)
end

          products/index.html.erb
        
<div id="products">
  <%= render @products %>
</div>

<%= will_paginate @products %>