Josh Huckabee

UPDATE 10/2007: If you're looking to do pagination, the new recommended way is to use the will_paginate plugin.

The new Paginator Gem by Bruce Williams is a much welcomed replacement to the built in Rails pagination mechanism. I've been toying with it now for a few weeks and it works great.

In the spirit of DRY, I've created a global paginator partial to handle paging throughout my application. This partial assumes that you've used the Paginator as per the documentation.

Here's the code for the partial:

<div id="pager">
    <span class="current_page">
        Page <%= params[:page].blank? ? 1 : params[:page] %> of <%= @pager.number_of_pages%>
    </span>
    <span class="page_links">
    <% if @page.prev?
        base_url[:page] = @page.prev.number -%>
    <%= link_to_remote '<', :update => element_to_update, :url => base_url -%>
    <% end -%>
    <% @pager.each do |p| -%>
       <% if p.number.to_s == params[:page] || (p.number == 1 && params[:page].blank?) -%>
         <span class="active"><%= p.number%></span> 
       <% else 
         base_url[:page] = p.number -%>
         <%= link_to_remote p.number, :update => element_to_update, :url => base_url -%>
       <% end -%>
    <% end 
    if @page.next
      base_url[:page] = @page.next.number -%>
    <%= link_to_remote '>', :update => element_to_update, :url => base_url -%>
    <% end -%>
    </span>
</div>

To use the partial, simply call render :partial and pass in a base_url parameter containing the base url of the controller and action you want the pagination links to go to. The partial will add the page number to the url accordingly.

<%= render :partial => 'paginator', 
    :locals => {:element_to_update => 'div_id', :base_url => 
        {:controller => 'yourcontroller', 
         :action => 'youraction'}} %>

Here are some sample styles to use with your paginator partial.

/* PAGINATOR */
#pager{
   overflow:        visible;
   font-size:       95%;
   line-height:     1.25;
   margin:          1em 0 0.75em 0;
   padding:         2px;
   float:           right;
   clear:           right;
}

#pager .current_page{
    float:left;
}

#pager .page_links{
    float:right;
}

#pager .page_links a:link,
#pager .page_links a:visited{
    padding: 2px;
    border: solid 1px #003399;
    background: #8CA8E6;
    color: #FFF;
}

#pager .page_links a:hover,
#pager .page_links a:active{
    padding: 2px;
    border: solid 1px #8CA8E6;
    background: #003399;
    text-decoration: none;
}

#pager .page_links .active{
    color: #FFF;
    padding: 2px;
    border: solid 1px #8CA8E6;
    background: #003399;
    text-decoration: none;
}