Create simple pagination UI [Part 1]

Nguyễn Quốc Đại — Sun, 25 Jul 2021 10:37:27 +0000

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

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

const createContinuousNumbers = (start, end) => {
  if (start === end) return [start]
  return [start, ...createContinuousNumbers(start + 1, end)]
}

The functions to move slide to left and right

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

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

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)

There some results to show how this function work

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

DEV Community: Nguyễn Quốc Đại

Create simple pagination UI [Part 1]