SetUp will_paginate gem With Bootstrap

will_paginate gem comes with default style. we can customize it....

1. add will_paginate gem in your Gemfile

      gem 'will_paginate', '~> 3.0.6'

2.   install gem

      bundle install

3.  Create a file pagination_list_link_renderer.rb in lib directory which inherit core style class.

class PaginationListLinkRenderer < WillPaginate::ActionView::LinkRenderer

  protected

    def page_number(page)
      unless page == current_page
        tag(:li, link(page, page, :rel => rel_value(page)))
      else
        tag(:li, link(page,"#"), :class => "active")
      end
    end

    def previous_or_next_page(page, text, classname)
      if page
        tag(:li, link(text, page), :class => classname)
      else
        tag(:li, link(text,"#"), :class => classname+" disabled")
      end
    end

    def html_container(html)
      tag(:ul, html, container_attributes)
    end

end

in this file we override 3 functions to style page numbers, previous_or_next button and html container

4. add autoload config property for lib directory in config/application.rb file

    config.autoload_paths += %W(#{config.root}/lib)

 

Now you can use your will_paginate helper with new renderer.

Controller : @orders = Order.paginate(:page => params[:page], :per_page => 10)

View:          <%= will_paginate(@orders, :renderer => PaginationListLinkRenderer) %>

now pagination will be in ul tag contaner and all anchor tag of page number and previous or next button will be in li tag and if page number or button is disabled then disabled class will be added in tag

 

 

Enjoy............

 

Comments