Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Example application to show infinite pagination with Kaminari and sausage
JavaScript Ruby
branch: master
Failed to load latest commit information.
app updated readme text
config updated readme text
db initial check-in
lib/tasks initial check-in
public updated readme text
test initial check-in
vendor/plugins initial check-in
.gitignore initial check-in
Gemfile initial check-in
Gemfile.lock initial check-in readme update for syntax highlighting
Rakefile initial check-in initial check-in

Infinite Scrolling


This tutorial shows how to create infinite scrolling pages using Kaminari, jQuery and sausage.


Create a new rails application. We will be using jQuery, so skip the prototype files.

$ rails new endless_page -J

Add 'jquery-rails' and 'kaminari' to the Gemfile and run the bundle command. Run the jQuery-generator to download the necessary files and setup rails to use jQuery.

$ rails generate jquery:install --ui

Download 'jquery.sausage' and add it along with 'jquery' and 'jquery-ui' to your javascript_include_tag.

$ curl -o public/javascripts/jquery.sausage.js

Let's create a model, which will be used to showcase the infinite scrolling and migrate the database.

$ rails generate scaffold Article title:string author:string body:text
$ rake db:migrate

I use the populator and ffaker gems to fill the database with random data, but this step is only required for showcasing the infinite scrolling. Run rake db:populate if you want to do the same.

In the next step we have to edit the scaffolded controller. We update the index-action so it looks like that:

def index
  @articles = Article.order(:created_at).page(params[:page])

  respond_to do |format|
    format.html # index.html.erb
    format.xml  { render :xml => @articles }

We are now using pagination powered by Kaminari in the index action. We also make sure that our index-action responds to requests sent from Javascript. In the next step we move the rendering of an article into a partial named '_article.html.erb'. Mine looks like this:

<div class='article'>
  <h3><%= article.title %></h3>
  <div class='author'>by <%= %></div>
  <div class='date'>by <%= article.created_at.to_s(:long) %></div>
    <%= article.body %>

We can now use this partial to render the articles in 'index.html.erb' using the following command. The div with a class of 'page' is important for sausage. It is used to determine the different pages for the navigation on the right.

<div id='articles'>
  <div class='page'>
    <%= render @articles %>

Now it is time to use sausage to implement the infinite scrolling. Add the following Javascript to the bottom of 'index.html.erb'.

<script type="text/javascript">
(function() {
  var page = 1,
      loading = false;

  function nearBottomOfPage() {
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200;

    if (loading) {

    if(nearBottomOfPage()) {
        url: '/articles?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function() {


The snippet is pretty straightforward. It checks if the user scrolled to the bottom of the page. If that is the case, an ajax-request is sent to the ArticlesController requesting the next page. After the ajax-request is completed successfully the sausage-navigation is redrawn. One last piece is missing. When the ajax-request is sent to the ArticlesController we need to append the next page of articles. We need to create a file named 'index.js.erb' to achieve this goal.

$("#articles").append("<div class='page'><%= escape_javascript(render(@articles)) %></div>");

Now we have an application featuring infinite scrolling in only a couple lines of code. It is easy to modify this example to use a Twitter-like 'read more'-link instead of infinite scrolling.


Something went wrong with that request. Please try again.