Pagination allows you to navigate through multiple pages of search results. It increases user experience, instead of have 100 things on a page.
I was very excited to learn of the kaminari gem, which helps you implement a quick pagination. I used the default at first, but after styling my page, of course it became an eye sore.
The kaminari gem has a few built in themes you can choose. You can choose a theme or create your own! It's very simple. After adding kaminari, you can set up views for tweaking styling.
Start
Run rails g kaminari:views
in your rails app.
You can investigate the options:
Now there is a list of themes, pick one, and add that to the end of the command in the terminal. This will generate a bunch of views as partials for you to play with.
What these views do for you is give you specific access to all of the links/buttons on the paginator. For me, I have an events page and I am paginating the search results. On my events page I add the following line to where I want the paginator to live:
<%= paginate @events, partial: 'events/paginator' %>
So then, I had to do some digging to get this to work right. I'll spare you the suffering. XD
Kaminari has the following helper methods so you don't have to create them:
- page
- prev_page
- next_page
Now, we can easily render conditionals in our paginator partial to display the appropriate items.
<nav class="custom-pagination">
<%# Render the "Previous" link if there's a previous page %>
<% if @events.prev_page %>
<%= link_to "Previous", url_for(page: @events.prev_page), class: "prev-page" %>
<% else %>
<span class="prev-page disabled">Previous</span>
<% end %>
<%# Render each page link %>
<% paginator.each_page do |page| %>
<% if page.current? %>
<span class="current-page"><%= page %></span>
<% else %>
<%= link_to page, url_for(page: page), class: "page-link" %>
<% end %>
<% end %>
<%# Render the "Next" link if there's a next page %>
<% if @events.next_page %>
<%= link_to "Next", url_for(page: @events.next_page), class: "next-page" %>
<% else %>
<span class="next-page disabled">Next</span>
<% end %>
</nav>
All the fancies
Now you can manipulate the links as you see fit with your custom css classes!
Totally worth it.
Top comments (2)
You can checkout faster gem than kaminari and customize similarly.
ddnexus / pagy
🏆 The Best Pagination Ruby Gem 🥇
Pagy
🏆 The Best Pagination Ruby Gem 🥇
✴ What's new in 9.0+ ✴
ActiveRecord::Relation
andSequel::Dataset
sets.🚀 🚀 🚀 🚀 🚀
Each dot in the visualization above represents the resources that Pagy consumes for one full rendering. The other gems consume hundreds of times as much for the same rendering.
The IPS/Kb ratio is calculated out of speed (IPS) and Memory (Kb): it shows how well each gem uses each Kb of memory it allocates/consumes.
Notice: the above charts refers to the comparison of the basic
pagy v3.0.0
helper withwill_paginate v3.1.7
andkaminari v1.1.1
.While it's not up-to-date, you can expect roughly similar results with the latest versions, maybe…
Fabulous, thanks for sharing! I'll check that one out next.