When I was working with Moviemates (my one dream pet project), I had to use will_paginate gem for pagination of the movie listings. As the UI are based on Twitter Bootstrap, the will_paginate links (generated by its view helpers) were looking very ugly. Please check the following screenshot to see how bad it was looking!
I had to google a while for a decent look of these links. I’ve found a very effective but easy fix written by oparrish and shared here. For your conveniences, the gist is attached here:
module BootstrapPaginationHelper class LinkRenderer < WillPaginate::ActionView::LinkRenderer protected def page_number(page) unless page == current_page link(page, page, :rel => rel_value(page)) else link(page, "#", :class => 'active') end end def gap text = @template.will_paginate_translate(:page_gap) { '…' } %(<li class="disabled"><a>#{text}</a></li>) end def next_page num = @collection.current_page < @collection.total_pages && @collection.current_page + 1 previous_or_next_page(num, @options[:next_label], 'next') end def previous_or_next_page(page, text, classname) if page link(text, page, :class => classname) else link(text, "#", :class => classname + ' disabled') end end def html_container(html) tag(:div, tag(:ul, html), container_attributes) end private def link(text, target, attributes = {}) if target.is_a? Fixnum attributes[:rel] = rel_value(target) target = url(target) end unless target == "#" attributes[:href] = target end classname = attributes[:class] attributes.delete(:classname) tag(:li, tag(:a, text, attributes), :class => classname) end end end
When you embed the will_paginate in the view, you just need to pass this helper and the links will be rendered using this helper.
= will_paginate(@movies, :renderer => 'BootstrapPaginationHelper::LinkRenderer')
However, as i needed some more customizations on every pagination links in my application, I’ve written another helper method (in my application helper) with all my required customizations.
def pagination_links(collection, options = {}) options[:renderer] ||= BootstrapPaginationHelper::LinkRenderer options[:class] ||= 'pagination pagination-centered' options[:inner_window] ||= 2 options[:outer_window] ||= 1 will_paginate(collection, options) end
In my views, I just needed to call this helper method instead of default method to render page links:
= pagination_links(@movies)
Now, see, how nice it looks:
However, today i’ve seen (but not tested) a easier solution. There is a separate gem released for the same purpose. It is named will_paginate_bootstrap. I think you can use that if you want. Usage detail are available on their site.