Create simple pagination UI [Part 1]
Tags: javascript, pagination, frontend
Published: 2021-07-25 10:37:27

Pagination is a popular UI that appears in almost all web applications. We often use a pagination component from a library, but sometimes for some reason we need to create our pagination.  In the article, I will show you a solution to create your own version of pagination.

Before we start, I will list some requirements for our pagination:
* Users can see the page number list. If the list is too long, some page numbers will be hidden and replaced by an ellipsis.
* Users can choose a page number that they want when they click on a page number
* Users can go to the next page or previous page by click on "Next" and "Prev" button
* Users can go to the first or last page by click on the "First" and "Last" button
* User can input a number to go to the given page directly

From the above requirement, we have a mockup for the pagination

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uotdfk5x1yodyi85nytc.png)

In the mockup, we have:
* Page numbers, we will have some buttons and each button has a number for navigating the user to the page that their want
* Prev and Next buttons help users move backward and forward
* First and Last buttons help users move to the first page or last page quickly instead of click Prev or Next button many times
* The Slide is a view box that helps users focus on some given page if the page list is too long. It can move to left or right to show the page number to the user
* An input to navigate the users to the given page

In this part, we will focus on creating the pagination data. Firstly, I will create some basic functions

The function helps to create continuous page numbers of slide
```javascript
const createContinuousNumbers = (start, end) => {
  if (start === end) return [start]
  return [start, ...createContinuousNumbers(start + 1, end)]
}
```

The functions to move slide to left and right
```javascript
const moveSlideToRight = (slide, step = 1) => {
  return slide.map(pageNumber => pageNumber + step)
}
const moveSlideToLeft = (slide, step = 1) => {
  return slide.map(pageNumber => pageNumber - step)
}
```
The functions to get maximum and minimum number from slide
```javascript
const getMaxPageNumberFromSlide = (slide) => Math.max(...slide)
const getMinPageNumberFromSlide = (slide) => Math.min(...slide)
```
The functions help to detect the position of a number with a number list. There are five areas where a page number can be in. We need 3 functions to detect the position of a number page. In the `out of range` area we can use one function to validate the page number. The `over leftmost` and `over rightmost` need to be handled by 2 functions to decide the slide should move right or left

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfi29j23ucm7uqo2nz0i.png)
```javascript
const isOverLeftmostOfSlide = (pageNumber, slide) => {
  return pageNumber < getMinPageNumberFromSlide(slide)
}
const isOverRightmostOfSlide = (pageNumber, slide) => {
  return pageNumber > getMaxPageNumberFromSlide(slide)
}
const isOutOfRange = (min, max) => pageNumber => {
  return pageNumber < min || pageNumber > max
}
```
Now we are ready to start writing the pagination logic. We will start with function `goTo` because the `next` function equal `goTo(currentPage + 1)`, `prev` function equal `goTo(currentPage - 1)`, `last` function equal `goTo(lastPage)` and `first` function equal `goTo(1)`

{% replit @DaiNguyen4/Blog-PaginationData %}

There some results to show how this function work

```javascript
const totalPage = 20
const slideWidth = 4
const currentPage = 1
const pagination = Pagination(currentPage, totalPage, slideWidth)

// { partition: [ [ 1, 2, 3, 4 ], [ 20 ] ], currentPage: 1 }
pagination.getState()

// { partition: [ [ 1, 2, 3, 4 ], [ 20 ] ], currentPage: 2 }
pagination
.next()
.getState()

//{ partition: [ [ 1, 2, 3, 4 ], [ 20 ] ], currentPage: 1 }
pagination
  .next()
  .prev()
  .getState()
```

It depends on the requirements, you can modify the conditions to `goTo` function.

This is my way to create pagination.  I hope it makes sense to you. If you have another solution or feedback, please leave the comment

Thanks