Formatting/styling will_paginate

I received few requests in the past ( personally and recently a comment on my post describing how to use will_paginate plugin ) about how to format pagination links while using will_paginate plugin.

So here it is:

When you add

<%= will_paginate @obj_instance %>

in your views to show your pagination links then it also creates an element (div) and wraps the whole thing under the class name pagination. The one with the current page will have the class name current.

Here is the html code generated by will_paginate


<div class=”pagination”>
<a href=”/page_path?page=2″>« Previous</a>
<a href=”/page_path”>1</a>
<a href=”/page_path?page=2″>2</a>
<span class=”current”>3</span>
<a href=”/page_path?page=4″>4</a>
<a href=”/page_path?page=5″>5</a>
<a href=”/page_path?page=4″>Next »</a>
</div>


Now, it is totally upto your imagination how you want to style it using CSS.

But, if due to some reason you don’t want to use the class pagination and add your own then do something like this


<%= will_paginate @obj_instance, :class => ‘my_class’ %>


Similarly, if you want to add an element id then

<%= will_paginate @obj_instance, :id => ‘my_element’ %>


Let’s say if you have done both like so:

<%= will_paginate @obj_instance, :id => ‘my_element’, :class => ‘my_class’ %>


then the new html generated by will_paginate will be

<div class=”my_class” id=”my_element”>
<a href=”/page_path?page=2″>« Previous</a>
<a href=”/page_path”>1</a>
<a href=”/page_path?page=2″>2</a>
<span class=”current”>3</span>
<a href=”/page_path?page=4″>4</a>
<a href=”/page_path?page=5″>5</a>
<a href=”/page_path?page=4″>Next »</a>
</div>
Yes, it is that simple.