By Karen Lundgren
Version 0.11.0

Like its ancestor Kaminari, BootstrapPager is a Scope & Engine based, clean, powerful, agnostic, customizable and sophisticated paginator for Rails 3+. Now with more shiny, including infinite paging, bootstrap integration, and the ability to use it within an engine.

Downloads

21727 (3012 for this version)

Links

Readme

Bootstrap Pager

<img src=“https://badge.fury.io/rb/bootstrap_pager.svg” alt=“Gem Version” /> <img src=“https://travis-ci.org/gemvein/bootstrap_pager.svg” alt=“Build Status” /> <img src=“https://coveralls.io/repos/gemvein/bootstrap_pager/badge.png” alt=“Coverage Status” />

Bootstrap Pager is an updated version of the Kaminari pagination gem, which is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator for modern web app frameworks and ORMs

New Features added in Bootstrap Pager

  • Works with Bootstrap out of the box

  • Now works with mountable rails engines using a namespaced route

  • Semantic HTML5 markup goodness

  • Added optional infinite scroll (off by default)

Features

Clean

Does not globally pollute Array, Hash, Object or AR::Base.

Easy to use

Just bundle the gem, then your models are ready to be paginated. No configuration required. Don’t have to define anything in your models or helpers.

Simple scope-based API

Everything is method chainable with less “Hasheritis”. You know, that’s the Rails 3 way. No special collection class or anything for the paginated values, instead using a general AR::Relation instance. So, of course you can chain any other conditions before or after the paginator scope.

Customizable engine-based I18n-aware helper

As the whole pagination helper is basically just a collection of links and non-links, Bootstrap Pager renders each of them through its own partial template inside the Engine. So, you can easily modify their behaviour, style or whatever by overriding partial templates.

ORM & template engine agnostic

Bootstrap Pager supports multiple ORMs (ActiveRecord, Mongoid, MongoMapper) multiple web frameworks (Rails, Sinatra), and multiple template engines (ERB, Haml).

Modern

The pagination helper outputs the HTML5 <nav> tag by default. Plus, the helper supports Rails 3 unobtrusive Ajax.

Engine Namespace

By passing in the ‘:engine_namespace` option, you can get the pager to use a different helper for your paths.

Supported versions

  • Ruby 1.8.7, 1.9.2, 1.9.3, 2.0.0, 2.1 (trunk)

  • Rails 3.0.x, 3.1, 3.2, 4.0, 4.1 (edge)

  • Haml 3+

  • Mongoid 2+

  • MongoMapper 0.9+

  • DataMapper 1.1.0+

  • Bootstrap 3

  • CSS 3

  • HTML 5

Install

Put this line in your Gemfile:

gem 'bootstrap_pager'

Then bundle install:

% bundle install

Usage

Query Basics

  • the page scope

    To fetch the 7th page of users (default per_page is 25)

    User.page(7)
    
  • the per scope

    To show a lot more users per each page (change the per_page value)

    User.page(7).per(50)
    

    Note that the per scope is not directly defined on the models but is just a method defined on the page scope. This is absolutely reasonable because you will never actually use per_page without specifying the page number.

    Keep in mind that per utilizes internally limit and so it will override any limit that was set previously

    User.count                  # => 1000
    a = User.limit(5).count     # => 5
    b = a.page(1).per(20).size  # => 20
    
  • the padding scope

    Occasionally you need to pad a number of records that is not a multiple of the page size.

    User.page(7).per(50).padding(3)
    

    Note that the padding scope also is not directly defined on the models.

General configuration options

You can configure the following default values by overriding these values using BootstrapPager.configure method.

default_per_page  # 25 by default
max_per_page      # nil by default
window            # 4 by default
outer_window      # 0 by default
left              # 0 by default
right             # 0 by default
page_method_name  # :page by default
param_name        # :page by default

There’s a handy generator that generates the default configuration file into config/initializers directory. Run the following generator command, then edit the generated file.

% rails g bootstrap_pager:config
  • changing page_method_name

    You can change the method name page to bonzo or plant or whatever you like, in order to play nice with existing page method or association or scope or any other plugin that defines page method on your models.

Configuring default per_page value for each model

  • paginates_per

    You can specify default per_page value per each model using the following declarative DSL.

    class User < ActiveRecord::Base
      paginates_per 50
    end
    

Configuring max per_page value for each model

  • max_paginates_per

    You can specify max per_page value per each model using the following declarative DSL. If the variable that specified via per scope is more than this variable, max_paginates_per is used instead of it. Default value is nil, which means you are not imposing any max per_page value.

    class User < ActiveRecord::Base
      max_paginates_per 100
    end
    

Controllers

  • the page parameter is in params[:page]

    Typically, your controller code will look like this:

    @users = User.order(:name).page params[:page]
    

Views

  • the same old helper method

    Just call the paginate helper:

    <%= paginate @users %>

    This will render several ?page=N pagination links surrounded by an HTML5 <nav> tag.

Helpers

  • the paginate helper method

    <%= paginate @users %>

    This would output several pagination links such as « First ‹ Prev ... 2 3 4 5 6 7 8 9 10 ... Next › Last »

  • specifying the “inner window” size (4 by default)

    <%= paginate @users, :window => 2 %>

    This would output something like ... 5 6 7 8 9 ... when 7 is the current page.

  • specifying the “outer window” size (0 by default)

    <%= paginate @users, :outer_window => 3 %>

    This would output something like 1 2 3 4 ...(snip)... 17 18 19 20 while having 20 pages in total.

  • outer window can be separately specified by left, right (0 by default)

    <%= paginate @users, :left => 1, :right => 3 %>

    This would output something like 1 ...(snip)... 18 19 20 while having 20 pages in total.

  • changing the parameter name (:param_name) for the links

    <%= paginate @users, :param_name => :pagina %>

    This would modify the query parameter name on each links.

  • extra parameters (:params) for the links

    <%= paginate @users, :params => {:controller => 'foo', :action => 'bar'} %>

    This would modify each link’s url_option. :controller and :action might be the keys in common.

  • Ajax links (crazy simple, but works perfectly!)

    <%= paginate @users, :remote => true %>

    This would add data-remote="true" to all the links inside.

  • the link_to_next_page and link_to_previous_page helper method

    <%= link_to_next_page @items, 'Next Page' %>

    This simply renders a link to the next page. This would be helpful for creating a Twitter-like pagination feature.

  • the page_entries_info helper method

    <%= page_entries_info @users %>

    This renders a helpful message with numbers of displayed vs. total entries.

I18n and labels

The default labels for ‘first’, ‘last’, ‘previous’, ‘…’ and ‘next’ are stored in the I18n yaml inside the engine, and rendered through I18n API. You can switch the label value per I18n.locale for your internationalized application. Keys and the default values are the following. You can override them by adding to a YAML file in your Rails.root/config/locales directory.

en:
  views:
    pagination:
      first: "&laquo; First"
      last: "Last &raquo;"
      previous: "&lsaquo; Prev"
      next: "Next &rsaquo;"
      truncate: "..."

Customizing the pagination helper

BootstrapPager includes a handy template generator.

  • to edit your paginator

    Run the generator first,

    % rails g bootstrap_pager:views default

    then edit the partials in your app’s app/views/bootstrap_pager/ directory.

  • for Haml users

    Haml templates generator is also available by adding the -e haml option (this is automatically invoked when the default template_engine is set to Haml).

    % rails g bootstrap_pager:views default -e haml
  • themes

    The generator has the ability to fetch several sample template themes from the external repository (github.com/amatsuda/bootstrap_pager_themes) in addition to the bundled “default” one, which will help you creating a nice looking paginator.

    % rails g bootstrap_pager:views THEME

    To see the full list of avaliable themes, take a look at the themes repository, or just hit the generator without specifying THEME argument.

    % rails g bootstrap_pager:views
  • multiple themes

    To utilize multiple themes from within a single application, create a directory within the app/views/bootstrap_pager/ and move your custom template files into that directory.

    % rails g bootstrap_pager:views default (skip if you have existing bootstrap_pager views)
    % cd app/views/bootstrap_pager
    % mkdir my_custom_theme
    % cp _*.html.* my_custom_theme/

    Next, reference that directory when calling the paginate method:

    <%= paginate @users, :theme => 'my_custom_theme' %>

    Customize away!

    Note: if the theme isn’t present or none is specified, bootstrap_pager will default back to the views included within the gem.

Paginating a generic Array object

BootstrapPager provides an Array wrapper class that adapts a generic Array object to the paginate view helper. However, the paginate helper doesn’t automatically handle your Array object (this is intentional and by design). BootstrapPager::paginate_array method converts your Array object into a paginatable Array that accepts page method.

BootstrapPager.paginate_array(my_array_object).page(params[:page]).per(10)

You can specify the total_count value through options Hash. This would be helpful when handling an Array-ish object that has a different count value from actual count such as RSolr search result or when you need to generate a custom pagination. For example:

BootstrapPager.paginate_array([], total_count: 145).page(params[:page]).per(10)

Creating friendly URLs and caching

Because of the page parameter and Rails 3 routing, you can easily generate SEO and user-friendly URLs. For any resource you’d like to paginate, just add the following to your routes.rb:

resources :my_resources do
  get 'page/:page', :action => :index, :on => :collection
end

This will create URLs like /my_resources/page/33 instead of /my_resources?page=33. This is now a friendly URL, but it also has other added benefits…

Because the page parameter is now a URL segment, we can leverage on Rails page caching!

NOTE: In this example, I’ve pointed the route to my :index action. You may have defined a custom pagination action in your controller - you should point :action => :your_custom_action instead.

Sinatra/Padrino support

Since version 0.13.0, bootstrap_pager started to support Sinatra or Sinatra-based frameworks experimentally.

To use bootstrap_pager and its helpers with these frameworks,

require 'bootstrap_pager/sinatra'

or edit gemfile:

gem 'bootstrap_pager', :require => 'bootstrap_pager/sinatra'

More features are coming, and again, this is still experimental. Please let us know if you found anything wrong with the Sinatra support.

Infinite Scroll with Jquery

For infinite scroll technology, add jquery.infinitescroll to your application.js file.

//= require jquery.infinitescroll
//= require infinitescroll

Then, add class=“infinitescroll” to the div containing your pagination call, and add the class “infinitescroll-item” to the items within that div that represent individual objects.

<div id="posts" class="infinitescroll">
    <div id="post_5" class="infinitescroll-item">
        ... Post content here ...
    </div>
    ... Many more posts here ...
    <%= pagination @posts %>
</div>

Contributors

  • Karen Lundgren - code updates

  • Chad Lundgren - verbiage and usability advice

Copyright © 2013 Sour Cherry Web. See MIT-LICENSE for further details.

Top Gems