Twitter Bootstrap work with will_paginate

ummm.... picture ummm.... · Apr 18, 2014 · Viewed 8.4k times · Source

I made will_paginate work fine, but I'm facing errors hooking up Twitter Bootstrap. My single-line will_paginate links become a bulleted list of links.

<% will_paginate @thing %>

becomes:

<%= will_paginate @thing, :renderer => BootstrapPagination::Rails %>

or I guess more modern:

<%= will_paginate @thing, renderer: BootstrapPagination::Rails %>

I get the vertical bulleted listing either way and I've tried including = and - signs, but I'm lost.

Answer

Kineolyan picture Kineolyan · Jul 20, 2014

To use will_paginate along with bootstrap, it is advised add the gem "bootstrap-will_paginate" to your project (see http://www.railstutorial.org/book/updating_and_deleting_users#sec-pagination).

Additionally, if you are using Twitter Bootstrap 3.x, there is an excessive div wrapping the pagination list to remove. Thanks this thread for the patch: https://gist.github.com/henrik/1214011

To sum up the patch, put the following in /config/initializers as will_paginate.rb.

# File config/initializers/will_paginate.rb
# From https://gist.github.com/1214011

module WillPaginate
    module ActionView
        def will_paginate(collection = nil, options = {})
            options[:renderer] ||= BootstrapLinkRenderer
            super.try :html_safe
        end

    class BootstrapLinkRenderer < LinkRenderer
        protected

        def html_container(html)
            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 previous_or_next_page(page, text, classname)
            tag :li, link(text, page || '#'), :class => [classname[0..3], classname, ('disabled' unless page)].join(' ')
        end

        def gap
            tag :li, link(super, '#'), :class => 'disabled'
        end

        end
    end
end