Pagination navigation
Tags: pagination, codenewbie, navigation
Published: 2021-08-08 00:56:54

## What is Pagination in web development?

Best way I can explain it is by splitting your website's content by using pages. Just like pages in a book, where it's a series of pages that contains the whole story.

## Pagination vs. Lazy-loading vs. Infinite scrolling?

That really depends on what your website needs and what are your UX goals are. There is an [article](https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/) written by Christian Holst for Smash magazine that compares the three and what is the most common practice as per the studies in the eCommerce world.

Since we're currently curious about pagination, I will try and implement it in a mock project and I'll take you in the learning journey with me!

So for this blog, I tried to apply pagination in a mock gallery with around 80 photos. But what are we trying to solve right now? Current flaw I notice is loading the elements in the DOM flawlessly and there is less user interaction on the page. For sure there are more ways to utilize pagination in your advantage, but we're gonna focus on those 2 for now.

_Here is the mock photo gallery I built to imitate the case we're trying to test with pagination. I added different types of image sources. 
( 1. Via url , 2. Photos saved in public folder )_
<img src="https://media.giphy.com/media/dXNoNwdTgXWR9Us2zI/giphy.gif" alt="scrolling the page gif" /> 
_See how upon refresh, our gallery doesn't load as quick as we want since it's all in one big dump of photos needed to be displayed._

Using pagination, users would have more interaction and control in our mock photo gallery and will help with loading time since it only had to load part of the whole gallery. Pros and Cons of using pagination have also been discussed in a blog from [UXPlanet](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1).

### Application
Quickest way to apply pagination are libraries!

<img src="https://media.giphy.com/media/IEwEu42K8mQlF2AUP4/giphy.gif" alt="pagination applied" /> _In this one I have used, React-Bootstrap Tab component to apply the pagination principle. Splitting the gallery into 4 pages. Also checkout [Pagination component](https://react-bootstrap.github.io/components/pagination/) in React- Bootstrap too!_

My code using the Tab component looks like this;
![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9svibh1jmi5s84ho3w64.png)
Other ways to do this is **manipulating the state**, or using a **global variable** for the pool of photos to manipulate, or manipulating through your **database query** (See this [example](https://dev.to/umpp101/different-types-of-pagination-3cgo)). In this method I did, I had a global variable(links) & a folder of photos in my public folder. Hence, the different methods to slice them.


### Options for pagination:
 - Standard pagination: Numbers, arrows, dots/icons, tabs
![Standard pagination - numbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfv7x8r95eb88nheigpz.png)
![Google pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/508b16cv3dnjqfzgvnnk.png)
 - Load more/Click for more button
![Load more button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3727cz6pwo7oex4l8zp.png)
 - Infinite Scroll
![instagram infinite scroll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh9ey31lhhdozvmgp7gw.png)

Besides the options for pagination, you can also make your own and style it in many ways! In CSS, there are more pagination styles to choose from! Check this [article](https://www.geeksforgeeks.org/css-pagination/) from Geeks for Geeks about it! 

**I hope this blog helped anyone looking into applying pagination into your projects!**

### Tada! The finish product!
![Page 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z6wgcdk6jyi9ehx7xqt.png)_Page 1_

![Page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piiar42m0lhkjr9583ls.png)_Page 2_

![Page 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2931mguj993mz6qwj5c.png)_Page 3_

![Page 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa16cxfttt8kfpsv4dmf.png)_Page 4_


**References:**
- Github [Repo](https://github.com/tolentinoel/randomHex) - repo I built for this blog and [more](https://dev.to/tolentinoel/cards-that-flip-169o).
- [Smash Magazine article](https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/)
- [Infinite Scrolling vs. Pagination](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)
- [Hipstew web app](http://hipstew.herokuapp.com/)- Load more button example
- Icons from IconFinder - [Fantasy](https://www.iconfinder.com/search?q=fantasy&price=free)
- Pagination in Vue from [CSS tricks](https://css-tricks.com/creating-a-reusable-pagination-component-in-vue/)
- Charter Photos from [Sucia Charters](http://suciacharters.com/)