After completing the first built of our rails app application, I decided to take it out for a spin. Using Ruby commands that were initially tested on rails console, I built a seed file to populate the database. There were 2 reasons to seed the database. The first was to get an aesthetic feel of the app filled with data. The second was to see how would the app would scale visually with a huge amount of data. After filling the database with 161 users, 60 blog post and 49 relationships, one of the pages span vertically to the height of Eiffel tower. You can imagine scrolling a page for a long time. So I went sourcing for a holistic solution to chunk views into a single page. I found Pagy. Pagy is a recent pagination library for Ruby on Rails. It was developed with performance in mind, with the ease to set up on a new or existing Ruby on Rails application. Also because I used Bulma CSS framework and Pagy was developed to with it. With the exponential data growth in mind, Pagy is the cream of the crop with it comes to performance and lite resource usage. In comparison to other known pagination gems, Pagy leads the way. Speed Memory Utilization Simplicity Efficiency In this tutorial, we will see how to build a custom pagination component with Rails for paginating large data-sets. We will build a paginated view of array and non-array data-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 only prerequisite is to ensure your Rails app is complete enough to view stored data-sets. Start by editing your Gemfile by adding the following line. gem # ./gemfile 'pagy' Rails offer standard spots to place initialization code (i.e ). In the rare event that your application needs to run some code before Rails itself is loaded, add a new file called . In the configuration file add the following lines. /config/initializer pagy.rb # config/initializer/pagy.rb require 'pagy/extras/bulma' require 'pagy/extras/array' 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. " " provides a pagination method (pagy) that works with ActiveRecord out of the box. Include the method in ApplicationController so it's reflected on all other controllers. Pagy::Backend generic Pagy::Backend # app/controllers/ApplicationController.rb < ActionController::Base class ApplicationController include end " " module provides a few methods to deal with the navigation aspect of the pagination. Include this method in ApplicationHelper. Pagy::Frontend Pagy::Frontend # app/helper/ApplicationHelper.rb module ApplicationHelper include end Identify which instance variable that handles the display of data-sets you wish to paginate. In my case, instance variables are as follows. .
    .
    @friends = @user.friends .
    .
    @nofriends = User.all_except(current_user) .
. .
    @friends = @user.friends # app/controllers/user_controllers.rb < ApplicationController class UsersController def show end def index end def friends end end Edit these instance variables with Pagy attributes as below. # app/controllers/user_controllers.rb

class UsersController < @ = @ , @ = ) @ = @ , @ = [ ], ) @ = @ , @ = ) ApplicationController def show user User.find(params[:user_id]) pagy friends pagy(@user.friends, items: 3 end def index users User.all pagy nofriends pagy(User.all_except(current_user), page: params :page items: 9 end . . def friends user User.find(params[:user_id]) pagy_a friends pagy_array(@user.friends, items: 9 end end On the Frontend in ERB file, add the following render for navigation link at the end of the block you want to paginate. <%= %> At the bottom of 
# app/views/users/users.html.erb pagy_bulma_nav(@pagy).html_safe # app/views/micrpost/friends.html.erb

<%= pagy_bulma_nav(@pagy).html_safe %> There are instances when the code above does not paginate array output from an instance variable. Example below shows a rails console query that has square brackets denoting as an array. The example below shows a rails console query that is not an array. Evidently, it does not have square brackets In my case I need to paginate array out from " ".  Thankfully Pagy has a render code for arrays. @nofriends = User.all_except(current_user), page: params[:page], items: 9 At the bottom # app/views/users/friends.html.erb

<%= pagy_bulma_nav(@pagy_a).html_safe %> of After completing the steps above, refresh your rails app and try it out. Pagy is not only limited to Bulma CSS framework, but it also supports bootstrap, semantics, etc. Check out our to see how we've set up Pagy. repository Sources and . here here

Mind

How To Pack Javascript Code with Webpack

Paginating Rails with Pagy

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Cloudinary Upload API Introduction: Hassle Free Alternative to AWS S3

Adding Redux to a React Blog

Bootstrap Vs. Bulma in Ruby on Rails Application

Building a Blog with React and Contentful

Building a website with React and Bulma

How to Use Bulma And VueJS Together

Cloudinary Upload API Introduction: Hassle Free Alternative to AWS S3

Adding Redux to a React Blog

Bootstrap Vs. Bulma in Ruby on Rails Application

Building a Blog with React and Contentful

Building a website with React and Bulma

How to Use Bulma And VueJS Together

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps