# Gemfile gem 'will_paginate'





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





# index.html.erb <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Products</h3> </div> <div class="table-responsive"> <table class='table table-hover table-condensed'> <thead> <tr> <th>Name</th> <th>Price</th> <th>Department</th> <th colspan="3"></th> </tr> </thead> <tbody id='products'> <%= render @products %> </tbody> </table> </div> </div> <%= will_paginate @products %> <%= link_to 'New Product', new_product_path, class: 'btn btn-lg btn-block btn-primary' %>





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





# _product_page_header.html.erb <tr class='info'> <td colspan="6" class='text-center'> Page <%= params[:page] %> </td> </tr>



When using infinite scrolling, try to keep three points in mind:





Content Accessibility - Do not put links at the bottom of the page as they would be hidden from the client and hard to access.

Separate Renders - Creating a separation between renders of the infinite scrolling can make it easier to find content.

Searchable List - If using infinite scrolling techniques, make sure that you are including some kind of search to make content accessible.





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