Pagination buttons with CSS and Javascript
HTML-код
- Опубликовано: 16 янв 2021
- 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]
Array From - • Javascript Array from ...
Map - • Map/Dictionaries in ja...
[Source Code]
codepen.io/beforesemicolon/pe...
[Playlist]
UI/UX Tips & Tricks • Build Web Views & UI E...
[Blog]
website = beforesemicolon.com/blog
medium = / beforesemicolon
[Follow Social Accounts]
- Instagram = / before_semicolon_
- twitter = / beforesemicolon
- facebook = / beforesemicolon
- codepen = codepen.io/beforesemicolon 
Наука
How do you normally handle pagination in your projects?
This awesome channel deserves hundreds of thousands of subscribers. let explode the like button pleaaaaaaaaase !!!!
Thanks 🙏🏼 much appreciated
Brilliant tutorial very well explained and presented, thanks!
Thanks for the feedback. Much appreciated :)
@@BeforeSemicolon I would be very interested to see how to use this concept with a paginated table from a database.
That should be pretty straight forward. Use the database data info like, how many pages there are and render this component accordingly. On the change event make the BE request to fetch the data for the page button that was clicked on.
What specifically is interesting to you about this scenario?
@@BeforeSemicolon I am just learning JavaScript, I have done pagination with php. Just needed to work out how to link the JavaScript pagination code with the php sql code and I was interested to see how you would do it, but I didn’t find a video in your collection. I thought about using the e.target.value, and putting that value into $_GET value using ajax but that seems like a long way round even to someone with my limited knowledge so I will keep on working on it. Thanks again for your video, very, very helpful, I appreciate it.
Dont use the javascript setup if you are using PHP. Simply use the HTML i have commented out in the source code.
Use if conditions in your PHP to add the buttons according to the results of your SQL DB query.
The only javascript you will need that way would be handling the click event on the buttons.
First part of the video i explain the HTML only solution. Use that with PHP render conditions and loops to create buttons according to pages count. Every time your page renders it should recalculate and display the buttons accordingly.
❤️ Sheesh the bits of algorithm 😪🔥
Any questions? Something not clear?
@@BeforeSemicolon no Sir. I just admire your work alot
Thank you 😊 appreciated
Thank you~~
Anytime :). Welcome to BFS
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
Hello, can you share a little more about what you are building please? Do you have some code I can take a look at?
@@BeforeSemicolon
I declared it globally like this:
const paginationButtons = new PaginationButton(32, 3, 1);
paginationButtons.render();
paginationButtons.onChange((event) => {
api.getChosePage(event.target.value)
.then(data => {
let recipeCard = data.results.reduce((markup, card) => markup + createRecipeCard(card.preview, card.title, card.description, card.rating, card._id), "");
recepiesCards.innerHTML = recipeCard;
//paginationButtons.update(data.page);
const paginationButtons = new PaginationButton(data.totalPages, data.limit, data.page); I NEED USE LIKE THAT BUT I DON'T UNDERSTAND HOW IT MIGHT BE AND I BE ABLE TO REWRITE IT
})
})
but, I need to do it inside axios requests and every time I need to rewrite the numbers of buttons because I use different axios request to get different amount of recipes:
api.getAllRecepies()
.then(data => {
let recipeCard = data.results.reduce((markup, card) => markup + createRecipeCard(card.preview, card.title, card.description, card.rating, card._id), "");
recepiesCards.insertAdjacentHTML('beforeend', recipeCard);
I NEED TO GET BUTTONS HERE
})
api.getCertainCategory(element.id)
.then(data => {
let recipeCard = data.results.reduce((markup, card) => markup + createRecipeCard(card.preview, card.title, card.description, card.rating, card._id), "");
recepiesCards.innerHTML = recipeCard;
AND REWRITE HERE
})
and I have many more axior requests where I get new information about totalPages and obviously, I should get different numbers of buttons
You should not need to re-write the pagination buttons. If you do you lose the event listener. Your list API endpoint should give you a total number of pages when you fetch the first page.
Use that to render the buttons ONCE. After that, simply react to the buttons change to update whats rendered on the page.
If you have multiple list render it once per list.
here is a sample of a project on how to use this
----------
const res = await fetchPage();
const paginationButtons = new PaginationButton(res.totalPages, 10);
paginationButtons.render(someElementContainer);
renderContent(res.data)
paginationButtons.onChange(async e => {
showLoadingIndicator();
const res = await fetchPage(e.target.value);
renderContent(res.data)
})
----------
You only render it once and you dont have to update the buttons agains. Just react to its change and change your page content accordingly
If you have something else that changes the page other than the buttons, you must call the update
paginationButtons.update(newPageNumber);
Let me also recommend you to use Markup. A small tool I created to help with rendering things easily => markup.beforesemicolon.com
Thanks
Anytime. :)
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 🙌
Oh my God, I think I figured out :)
supose we have total 20 elments but we want to show only 10 at a time
so we always try to place at the middle, meaning if current is 20, it shoud have half of 10 (=5) before current element and five after
x x x x x 20 x x x x x
but the five elements after 20 would be out of range, thats why
e always test if from current element we have space to place 5 more items without getting out of range, if thats the case
we take 20 as the upper bound, and find the initial one, which we get by subracting LAST from the max we can show at a time.
Code is like poem, we have to take a time to anaylize it, feel it
thanks for the video dude, every video I learn somethin new, ur logic is incredible
Thats amazing…i could not have explained it better. 🙏🏼 thank you…
I need this function as a angular can you pls helpme
Sure. What you done so far?
I am done pagenNumbers function but PaginationButtons concept I can't able to do
Why? What’s the problem?
May i ask what is the use of the underscore argument inside arrow function. thank you :)
It is a code convention which means the argument is not needed/ignored.
@@BeforeSemicolon thankyou
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😔
On the click handler check if the button value is the same as the currentPage value and simply quit early by returning nothing
@@BeforeSemicolon thanks a lot man! it worked.
Awesome. Why didn't you use classes though?
What do you mean by “classes”?
@@BeforeSemicolon OOP
Well, I am creating and “object” with the constructor function. Using “class” is also posible but I find dealing with constructor function for UI stuff much easier.
OOP for the win !
I feel like using class would make it easier to reason about.
But I noticed many OG javacript développers prefer to use a functional approach
We did OOP in Javascript before classes. They are not the only way to create objects in javascript. Under the hood, classes in javascript are just constructer function and objects with prototype.
How to increase or decrease total pages at Ajax call and after redering
Your API should always call 1 single page. Total pages is always 1. Thats the single page that should be rendered
@@BeforeSemicolon i mean page range suppose before calling ajax page range 2 after i have to increase page range 4 or decrease
I did not understand the scenario. Can you do a step by step break down?
@@BeforeSemicolon after rendering button suppose again i have to increase page range or buttons 3 to 4
Then you would remove the pagination buttons component and re-render with new range and details. What am i missing?
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 {
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.
Hi, i need a little more context. How are you populating the pages for example? My guess is that this is reloading the page and the way you are populating the pages is not taking in consideration the current page so it resets
@@BeforeSemicolonthank you for reply and tons of thanks to you !!
How can I make them links?
Replace the button with a tag or when click handle navigating to a different page
@@BeforeSemicolon in JavaScript?
@@BeforeSemicolon
make a video on that
Yeah. All is set in js
@@BeforeSemicolon
can you make a video please?
Dang this is too complicated
Can you be more specific?
@@BeforeSemicolon the logic behind this pagination 😭😭 i don’t think i woud come up with this
Please share your approach/attempt. Im curious about a nulew approach