Pagination in Rails

In this blog, we will look at what pagination is and how to implement it into your Rails app.

Intro

Everybody has done some shopping on Amazon at some point. We live in the age of information and convenience. Before the school year started, I was shopping on Amazon for a new backpack with my daughter. Of course, there were more options than one could dream of and it would have taken us three lifetimes to look through them all.

This is where pagination comes in. With pagination, we can limit the number of items that are retrieved from the database and shown at a given point. It can be overwhelming to look at one page with hundreds or thousands of items on it. Why not show twenty or thirty items at a time instead? This is what pagination can do for us. Basically, it breaks up a large list into a sequence of smaller lists based on the specifications we give it.

Setting up

A quick internet search of "will_paginate" finds this. Before we continue, take a look at it. Setting up pagination is surprisingly simple. After you have read it, we walk through the setup step by step. We will reference

Step 1

First, we need to install the pagination gem:

// in the Gemfile

gem 'will_paginate', '~> 3.1.0'

Then run bundle install from the terminal.

Step 2

In my app, I have a couple of places I want to be able to implement pagination. First, I will head to the controller(s) and make the necessary code changes there. We get this line of code from the documentation - Post.paginate(page: params[:page], per_page: 30). In the controller the code currently looks like this:

class ArticlesController < ApplicationController

def index
  @articles = Article.all
end
...

The code in the index action gets changed:

def index
  @articles = Article.paginate(page: params[:page], per_page: 5)
end

Now, the @articles instance variable will hold only a certain number of items from the database according to our specifications. In this case, I specify that each page should show five items.

Step 3

Again, referring to the documentation, we are given this line of code - <%= will_paginate @posts %>. So, in the appropriate view (articles/index.html.erb in this case):

<h1 class="text-center mt-4">This is the index page</h1>

<%= render 'article' %>

The following code is added:

<h1 class="text-center mt-4">This is the index page</h1>

<div class="apple_pagination">
  <%= will_paginate @articles, :container => false %>
</div>

<%= render 'article' %>

<div class="apple_pagination">
  <%= will_paginate @articles, :container => false %>
</div>

I'm sure you noticed a couple of things. I wanted to render the pagination at the top and the bottom of the page. Also, I added some styling. You can do the same by following the link - make those pagination links prettier - in the documentation to here.

Recap

In this short and sweet read, pagination was covered. We learned:

1. Pagination breaks up a large list into a sequence of smaller lists based on the specifications we give it.
2. It is pretty darn simple to implement!

I hope you learned something new. Happy coding!