Pagination buttons with CSS and Javascript

A simple walkthrough on how to create a simple pagination button similar to the one used in the google results page for navigation.

[Mentioned Videos]

[Source Code]

[Playlist]

[Blog]

[Follow Social Accounts]

[BeforeSemicolon]

How do you normally handle pagination in your projects?

[mouhamaddiop]

This awesome channel deserves hundreds of thousands of subscribers. let explode the like button !!!!

[photoinshot]

Brilliant tutorial very well explained and presented, thanks!

[smeyk]

hey there! thanks for the tutorial it was quite helpful! I have one question for you - can you tell me how can I rewrite the number of buttons when I use different fetch requests I get different numbers of totalPages but I don't know how it might be

[ellsonmendesYT]

why we check if current is the last element using this
if(current+ half >= total) ?

my head couldn't get around why we use 'half' and not only

if(current==total) or
if current is equal or beyond the total
if(current >= total)
I'd appreciate if anybody can explain it 🙌

[justtestingmycurrentskills]

Awesome. Why didn't you use classes though?

[VSTamilInfo]

I need this function as a angular can you pls helpme

[frind-empc]

May i ask what is the use of the underscore argument inside arrow function. thank you :)

[JaySingh-plzy]

How to increase or decrease total pages at Ajax call and after redering

[realdaly]

Why the current page button is clickable ? Shouldn't it be unclickable or I'm mistaken 🤔
I need to make it like that in my project but I don't know how😔

[rameshmetta]

I'm trying to route to a page using thymeleaf expression as below. But current button always resets to page 1 though page is redirected on a click event and goes back to page 1. Can you please tell me how to add this pagination component to a <div section with id = "pagination-container" in a html page ?

paginationButtons.onChange(e => {
newPage = e.target.value;
redirectUrl = "[[@{/users/page/}]]" + newPage;
window.location.href = redirectUrl;
});

if i remove redirect statement, it works as expected priting the correct page number.