Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make will_paginate generate HTML that bootstrap.less will render nicely
# Based on https://gist.github.com/1182136
class BootstrapLinkRenderer < ::WillPaginate::ActionView::LinkRenderer
protected
def html_container(html)
tag :div, tag(:ul, html), container_attributes
end
def page_number(page)
tag :li, link(page, page, :rel => rel_value(page)), :class => ('active' if page == current_page)
end
def gap
tag :li, link(super, '#'), :class => 'disabled'
end
def previous_or_next_page(page, text, classname)
tag :li, link(text, page || '#'), :class => [classname[0..3], classname, ('disabled' unless page)].join(' ')
end
end
def page_navigation_links(pages)
will_paginate(pages, :class => 'pagination', :inner_window => 2, :outer_window => 0, :renderer => BootstrapLinkRenderer, :previous_label => '&larr;'.html_safe, :next_label => '&rarr;'.html_safe)
end
@thatfunkymunki

This comment has been minimized.

Copy link

@thatfunkymunki thatfunkymunki commented Nov 9, 2011

I get a NotImplementedError when I use this, relevant part of stack trace:

will_paginate (3.0.2) lib/will_paginate/view_helpers/link_renderer.rb:81:in `url'
will_paginate (3.0.2) lib/will_paginate/view_helpers/link_renderer.rb:93:in `link'
app/helpers/application_helper.rb:14:in `page_number'

Is this a version error (i.e. should i go down some versions in will_paginate)?

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Nov 9, 2011

In the latest will_paginate, the correct superclass for the BootstrapLinkRenderer is instead:

::WillPaginate::ActionView::LinkRenderer
@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Nov 9, 2011

I'd update the gist to reflect this, but I'm in a rush right now. :-)

@thatfunkymunki

This comment has been minimized.

Copy link

@thatfunkymunki thatfunkymunki commented Nov 9, 2011

Thanks, much appreciated.

@thatfunkymunki

This comment has been minimized.

Copy link

@thatfunkymunki thatfunkymunki commented Nov 9, 2011

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Nov 9, 2011

Doh, if I'd seen the "Edit" button, I'd have fixed it right away. More coffee needed...

Cheers!

@jinscoe-zz

This comment has been minimized.

Copy link

@jinscoe-zz jinscoe-zz commented Jan 3, 2012

Do I have to call this helper in a different way? Or should it just work? Currently when I put this in my application helper file and restart my server I do not get the pagination wrapped in the ul and li elements that bootstrap likes.

Thanks!

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Jan 3, 2012

See the page_navigation_links helper function above for how to generate the full bootstrap-style html.
-Steve

@jinscoe-zz

This comment has been minimized.

Copy link

@jinscoe-zz jinscoe-zz commented Jan 3, 2012

Thanks for the quick answer Steve!

I have replaced "will_paginate @feeditems" in my view with

<%= page_navigation_links @feed_items %>

I get an error of: NotImplementedError in Pages#home

Forgive my ignorance. Just now making my first rails app. Thanks for any help!

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Jan 3, 2012

Yep, see @thatfunkymunki's comments and modified version above. I should really go ahead and update this gist to incorporate his changes.

@jinscoe-zz

This comment has been minimized.

Copy link

@jinscoe-zz jinscoe-zz commented Jan 3, 2012

Thanks much for your help!

@dylan-conlin

This comment has been minimized.

Copy link

@dylan-conlin dylan-conlin commented Feb 4, 2012

<%= page_navigation_links @users %> worked for me!

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Feb 4, 2012

@fellytone84 - Glad it worked for you.

I've updated this gist to directly reflect @thatfunkymunki's fixes here...

@smoothdvd

This comment has been minimized.

Copy link

@smoothdvd smoothdvd commented Feb 7, 2012

@purcell I've just added classname option to page_navigation_links, now it can support Bootstrap 2.0's flexible alignment option: .pagination-center, .pagination-right, default option is pagination.

@shanepinnell

This comment has been minimized.

Copy link

@shanepinnell shanepinnell commented Feb 18, 2012

Thanks, works great!

@bertomartin

This comment has been minimized.

Copy link

@bertomartin bertomartin commented Mar 6, 2012

how do you specify that a link is remote, and how about specifying the params hash? There's no way to pass in those parameters to "page_navigation_links". For example, I need to pass in=> :remote => true.

@purcell

This comment has been minimized.

Copy link
Owner Author

@purcell purcell commented Mar 6, 2012

@bertomartin There's nothing stopping you from changing the definition of page_navigation_links so that it allows you to merge in extra options.

@bertomartin

This comment has been minimized.

Copy link

@bertomartin bertomartin commented Mar 6, 2012

@purcell, I tried doing that. Had a problem though, but I'll look into it again (very late last night). Thanks for this script.

@tbhockey

This comment has been minimized.

Copy link

@tbhockey tbhockey commented Apr 6, 2012

Very nice. Thanks!

@sur

This comment has been minimized.

Copy link

@sur sur commented Aug 1, 2012

worked out well. thanks!

@leonmitchelli

This comment has been minimized.

Copy link

@leonmitchelli leonmitchelli commented Aug 20, 2012

Worked like a charm, thanks!

@shotty01

This comment has been minimized.

Copy link

@shotty01 shotty01 commented Oct 2, 2012

this was great. i didn't want to use a gem, and this gist just nails it. thanks a lot!

@scaryguy

This comment has been minimized.

Copy link

@scaryguy scaryguy commented Jul 26, 2013

It worked like a charm! Thank you!

But one thing, all this is not about LESS or SASS. I'm working with SASS and no problem at all. Maybe you can consider to change gist's title.

@mahajanabhij

This comment has been minimized.

Copy link

@mahajanabhij mahajanabhij commented Feb 22, 2014

This worked beautifully thanks!

@lucashour

This comment has been minimized.

Copy link

@lucashour lucashour commented Sep 19, 2017

Thank you! It works perfect! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment