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
Top comments (0)