© 2018 Domizio DemichelisMIT License


Pagy comes with a few optional extensions/extras:

Extra Description Links
array Paginate arrays efficiently avoiding expensive array-wrapping and without overriding array.rb, documentation
bootstrap Add nav, responsive and compact helpers for the Bootstrap pagination component bootstrap.rb, documentation
bulma Add nav, responsive and compact helpers for the Bulma pagination component bulma.rb, documentation
countless Paginate without any count, saving one query per rendering countless.rb, documentation
elasticsearch_rails Paginate elasticsearch_rails gem results efficiently elasticsearch_rails.rb, documentation
foundation Add nav, responsive and compact helpers for the Foundation pagination component foundation.rb, documentation
headers Add RFC-8288 compliant http response headers (and other helpers) useful for API pagination headers.rb, documentation
i18n Use the I18n gem instead of the pagy implementation i18n.rb, documentation
items Allow the client to request a custom number of items per page with a ready to use selector UI items.rb, documentation
materialize Add nav, responsive and compact helpers for the Materialize CSS pagination component materialize.rb, documentation
overflow Allow for easy handling of overflowing pages overflow.rb, documentation
plain Add responsive and compact plain/unstyled helpers plain.rb, documentation
searchkick Paginate arrays efficiently avoiding expensive array-wrapping and without overriding searchkick.rb, documentation
semantic Add nav, responsive and compact helpers for the Semantic UI CSS pagination component semantic.rb, documentation
support Extra support for features like: incremental, infinite, auto-scroll pagination support.rb, documentation
trim Remove the page=1 param from links trim.rb, documentation


Extras are not loaded by default, so you should require them explicitly in your pagy.rb initializer (see Configuration):

require 'pagy/extras/bootstrap'
require 'pagy/extras/...'


Extras don’t define any new module or class, they just re-open the Pagy class and modules, adding the extra methods as they were part of the loaded pagy gem. This neatly separates the core code from the optional extras, still keeping its usage as simple as it were part of the core.


All the added methods are documented in the respective extras.


A few helpers use javascript:

If you use any of them you should load the pagy.js file, and run Pagy.init() on window load and eventually on AJAX-load.

In rails apps

With the asset pipeline

If your app uses the sprocket asset-pipeline, add the assets-path in the pagy.rb initializer:

Rails.application.config.assets.paths << Pagy.root.join('javascripts')

Add the pagy javascript to the application.js:

//= require pagy

Add an event listener for turbolinks:

window.addEventListener("turbolinks:load", Pagy.init);

or a generic one if your app doesn’t use turbolinks:

window.addEventListener("load", Pagy.init);

With Webpacker

If your app uses Webpacker, ensure that the webpacker erb loader is installed:

bundle exec rails webpacker:install:erb

Then create a pagy.js.erb to render the content of pagy.js and add the event listener into it:

// app/javascript/src/javascripts/pagy.js.erb
<%= Pagy.root.join('javascripts', 'pagy.js').read %>
window.addEventListener("load", Pagy.init)

and import it:

// app/javascript/application.js
import '../src/javascripts/pagy.js.erb'


In non-rails apps

Ensure the pagy/extras/javascripts/pagy.js script gets served with the page and add an event listener like:

window.addEventListener('load', Pagy.init);

or execute the Pagy.init() using jQuery:

$( window ).load(function() {

Using AJAX with javascript-enabled helpers

If you AJAX-render any of the javascript helpers mentioned above, you should also execute Pagy.init(container_element); in the javascript template. Here is an example for a pagy_bootstrap_responsive_nav AJAX-render:

pagy_remote_responsive controller action (notice the link_extra to enable AJAX):

def pagy_remote_responsive
  @pagy, @records = pagy(Product.all, link_extra: 'data-remote="true"')

pagy_remote_responsive.html.erb template for non-AJAX render (first page-load):

<div id="container">
  <%= render partial: 'responsive_nav' %>

_responsive_nav.html.erb partial shared for AJAX and non-AJAX rendering:

<%== pagy_bootstrap_responsive_nav(@pagy) %>

pagy_remote_responsive.js.erb javascript template used for AJAX:

$('#container').html("<%= j(render 'responsive_nav')%>");

Notice the document.getElementById('container') argument: that will re-init the pagy elements just AJAX-rendered in the container div.