This content originally appeared on DEV Community and was authored by Ashim Shrestha
Hello everyone.
This is my first post.
This was a specific problem that I faced while trying to clone a manga page. I wanted to create a pagination navigator which looked like
First Prev ... 21 22 23 24 25 26 27 28 29 30 31 ... Next Last
where current page is 26.
The simplest way I have found to achieve this in NextJs is by
var total_pages = 50
var current_page = 25
var page_holder = [];
for (var i = current_page - 5; i <= parseInt(current_page )+ 5 ; i++) {
if (i > 0 && i <= total_pages) {
page_holder.push(i);
}
}
Here, we are starting with empty array which is all the page rendered in the page. Then we are getting page number starting 5 page before current to 5 page after current page.
Then we are checking if the number is negative or greater than total page to avoid non-existing page number.
Use parseInt() to make sure that math is done correctly. If current_page is 5, then current_page + 5 might return 55 instead of 10 when parseInt isn't used
Then to render the pagination
I am using tailwind to style the component.
return (
<div className='flex flex-row flex-wrap justify-center'>
<Link href={`/page=1`}>
<a className={`w-8 text-center justify-center rounded-xl border-2 border-slate-500
align-middle m-1 p-1 ${!(page == 1) ? 'visible' : 'hidden'}`}
>
First
</a>
</Link>
<Link href={`/page=${page - 1}`}>
<a className={`w-8 text-center justify-center rounded-xl border-2 border-slate-500
align-middle m-1 p-1 ${!(page == 1) ? 'visible' : 'hidden'}`}
>
Prev
</a>
</Link>
{pagesAll.map((val, i) => {
return (
<Link key={i} href={`/page=${val}`}>
<a
className={`min-w-[2rem] text-center justify-center ${
val == page
? 'bg-slate-500'
: 'border-2 border-slate-500'
} rounded-xl align-middle m-1 p-1`}
>
{val}
</a>
</Link>
);
})}
<Link href={`/page=${parseInt(page) + 1}`}>
<a className={`w-8 text-center justify-center rounded-xl border-2 border-slate-500
align-middle m-1 p-1 ${!(page == total_pages) ? 'visible' : 'hidden'}`}
>
Next
</a>
</Link>
<Link href={`/page=${total_pages}`}>
<a className={`w-8 text-center justify-center border-2 border-slate-500 rounded-xl
align-middle m-1 p-1 ${!(page == total_pages) ? 'visible' : 'hidden'}`}
>
Last
</a>
</Link>
</div>
)
Here, we are using condition to render First, Prev, Next and Last button.
The final code would look like the following:
The final product would look like following:
When current page is first page
When current page is 25
When current page is 35
When current page is last page
This content originally appeared on DEV Community and was authored by Ashim Shrestha
Ashim Shrestha | Sciencx (2022-04-18T04:13:03+00:00) How to create pagination in NextJs for large number of pages?. Retrieved from https://www.scien.cx/2022/04/18/how-to-create-pagination-in-nextjs-for-large-number-of-pages/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.