#51 will_paginate (revised)

Oct 06, 2011 | 6 minutes | Plugins

Almost every Rails application needs pagination, and will_paginate is a great way to go. Here I show you how to set it up, customize the way it looks, and see how it compares with Kaminari.

Click to Play Video ▶

Download:
source codeProject Files in Zip (85.8 KB)
mp4Full Size H.264 Video (18.2 MB)
m4vSmaller H.264 Video (9.89 MB)
webmFull Size VP8 Video (9.21 MB)
ogvFull Size Theora Video (25.5 MB)

Browse Source Code

Resources

          Gemfile
        
gem 'will_paginate', '> 3.0'

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

          products/index.html.erb
        
<%= will_paginate @products, previous_label: h("<"), next_label: h(">") %>

<!-- or custom pagination -->
<% if @products.previous_page %>
  <%= link_to "< Previous", params.merge(page: @products.previous_page) %>
<% end %>
Page <%= @products.current_page %> of <%= @products.total_pages %>
<% if @products.next_page %>
  <%= link_to "Next >", params.merge(page: @products.next_page) %>
<% end %>

          application.css.scss
        
.pagination {
  background: white;
  cursor: default;
  height: 22px;
  a, span, em {
    padding: 0.2em 0.5em;
    display: block;
    float: left;
    margin-right: 1px;
  }
  .disabled {
    display: none;
  }
  .current {
    font-style: normal;
    font-weight: bold;
    background: #2e6ab1;
    color: white;
    border: 1px solid #2e6ab1;
  }
  a {
    text-decoration: none;
    color: #105cb6;
    border: 1px solid #9aafe5;
    &:hover, &:focus {
      color: #000033;
      border-color: #000033;
    }
  }
  .page_info {
    background: #2e6ab1;
    color: white;
    padding: 0.4em 0.6em;
    width: 22em;
    margin-bottom: 0.3em;
    text-align: center;
    b {
      color: #000033;
      background: #2e6ab1 + 60;
      padding: 0.1em 0.25em;
    }
  }
}