This video is seriously so underrated. Thanks a bunch! It helped me a lot. The only thing I'm missing is the prev. and next buttons, I will try and figure it out.
thank you, I thought it might be tooooo hard to implement. but you way of teaching and clarity explanation made it easier. once again thank you keeeep teaching
@@TylerPotts Thank you, I am now struggling to fetch the data for pagination from a query in database. Any suggestion, pointers or help will be appreciated.
You sir are a great teacher thanks for the help made it really easy to understand was searching for other alternatives for the language i was actually using but ended up going off of your methods thanks to you being able to break it down so easy thank you for giving back to the community
@@TylerPotts I Love your script but i have a big porblem and hope you can help me. Your list_itens looks "Item 1", "Item 2", "Item 3"..... But when i try your script with JSON i cant use it. I get this JSON encoded from PHP on MySQL Database with echo json_encode($data); i catch this with ajax get but i cant run this on your script. In console.log i can see the index in JSON data What must i do. I need your help
This is awesome. An absolutely great tutorial. One question though. When you created the PaginationButton function and added the 'current_page' variable, I noticed that it wasn't declared in that function, nor was it passed to the function. I thought that, for sure, this wasn't going to work. But it did in yours and not in mine. What gives?
Nevermind! Got it. Firstly, I had the constants and current_page in a jQuery document.ready tag. I also had the functions above the constants and lets. Duh.
Thank you so much for your nice and insightful tutorial. I should say I am a newbie in JS, anyhow, I have added two functions for "Next" and "PREV". I guess they are working properly among the other functions. adding the buttons inside the SetupPagination(): let next = document.createElement('button'); next.id = "next"; let prev = document.createElement('button'); prev.id = "prev" var s = document.getElementsByTagName('button')[0] prev.innerText = 'Previous'; next.innerText = 'Next'; wrapper.insertBefore(prev,s); Next and Prev Functions: function nextp (page,items,rows){ let page_count = Math.ceil(items.length/rows); document.getElementById("next").addEventListener('click', () => { let page = document.querySelector(".active"); if(parseInt(page.id) === page_count ){ } else { current_page = parseInt(page.id) + 1; DisplayList(items, list_element, rows, current_page); page.classList.remove('active'); let pop = document.getElementById(current_page); pop.classList.add('active'); } }); } function prevp (page,items){ document.getElementById("prev").addEventListener('click', ()=> { let page = document.querySelector(".active"); if (parseInt(page.id)===1){ } else { current_page = parseInt(page.id) - 1; DisplayList(items, list_element, rows, current_page); page.classList.remove('active'); let pop = document.getElementById(current_page); pop.classList.add('active'); } }); }
Thank you very much, it was very useful to me. Please, I need to implement the same pagination but inside some tabs, and I'm losing the current tab when I change the page number.... Please, anyone does know how could I fix it?, or Where could I find information? Thank you so much...
Wao! so helpful. I am trying to replace the "list_item" content with object-object items in the JS file but my end result was blank, Tyler I need your help😟. example: const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c"
Would you think this could be used if the content was already on the page? Text, images and all types of fun! Text, images and all types of fun! Text, images and all types of fun!
I don't know why most liked the video but to me video is like just copying pasting the youtuber code and straightway get a working code (pretty much like we already can from forums or searches) as only few things were explained, rest were just straightway writing without explanation. I simply didn't like the video
i came here just for the JS logic and it is really sad that although tutorial was good but because you speak sofast I stopped in middle of the video and wrote this comment and one more suggestion is where you are writing a logic please explain it clearly you speak fast and frequently change the things
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
The perfect pagination tutorial
This video is seriously so underrated. Thanks a bunch! It helped me a lot. The only thing I'm missing is the prev. and next buttons, I will try and figure it out.
works perfectly. Made a few adjustments to my own project but after following your explanation it's finally working as intended. Thank you.
Thanks to this tutorial I've finally figured out how to implement a working pagination! 😃Thank you!
Fantastic!
thank you, I thought it might be tooooo hard to implement. but you way of teaching and clarity explanation made it easier. once again thank you keeeep teaching
You're very welcome!
Muchas gracias, hombre! No pude entender lo que decías debido a que no sé inglés, pero pude implementarlo en mi proyecto. Agradecido contigo
Excellent tutorial vid... everything works by the end (Jan-004-2020)
- well done, cheers, and thanks Tyler
Thanks David!
Thank you for the posting. It is very helpful.
Glad it was helpful!
@@TylerPotts Thank you, I am now struggling to fetch the data for pagination from a query in database. Any suggestion, pointers or help will be appreciated.
A got a solution, no warries.
Thank you so much for this video! This really helped me for my project!
БОЖЕ ЧУВАК СПАСИБО!!!!!!! ПРОСТО СПАСИБО ТЕБЕ!!!!!!!!!!!!
You sir are a great teacher thanks for the help made it really easy to understand was searching for other alternatives for the language i was actually using but ended up going off of your methods thanks to you being able to break it down so easy thank you for giving back to the community
Happy it helped!
thank you! after hours and hours of googling i finally came across this video and it helped me so much
Happy to help!
a tip: you can watch movies at Flixzone. I've been using them for watching loads of movies these days.
@Colten Coleman Definitely, I've been watching on Flixzone for since november myself :)
Thank you for your clear explanation. It helps me do my project.
Glad it helped!
Awesome dude!! I had to figured it out how to do the same on react and it worked perfectly, thanks for the enlightment!
Awesome! :)
I thought you were having seizure at 08:27 mate. I don't understand how you guys understand this accent. Thanks for the well working tutorial.
Thanks for sharing, this is a life saver.
Thanks for watching!
best Tutorial what i watched. thx a lot
Glad it helped!
@@TylerPotts I Love your script but i have a big porblem and hope you can help me.
Your list_itens looks "Item 1", "Item 2", "Item 3".....
But when i try your script with JSON i cant use it.
I get this JSON encoded from PHP on MySQL Database with echo json_encode($data);
i catch this with ajax get but i cant run this on your script. In console.log i can see the index in JSON data
What must i do. I need your help
thanks bro, i was able to set up my first pagination, even though i had to watched it more than twices 😂, greetings 👍
Glad it helped!
gracias por enseñar este tema de paginacion esta muy bien la logica para sacar este proyecto
Thank you, man!
Thank you so much sir, this is so helpfull, it helped me alot!
Thank you very much! :D
what did you do that the item boxes show up? did the script exactly and nothing in my html or css that i update can make the item boxes show up.
RESPECT!!!
Thankyou Very much
You literally saved my ass!
Ha, happy to help :D
Thanks, this video is wonderful! What color theme do you use?
thanks a lot bro
Hi, at the end of the page when there are only a few items left, the pagination bar got pushed up. How to fix this?
How do you do it with an API?
Helpful...bro can you tell how we can loop trough JSON data? as in video you have just used an Array...
Hi is there any way of showing maybe like 1to 6 button and show other as you click, thanks!!
thank a million time body :)))))))
I have an error informing items.slice(start, end) is not a function.
can you do pagination by div not by items ?
This is awesome. An absolutely great tutorial. One question though. When you created the PaginationButton function and added the 'current_page' variable, I noticed that it wasn't declared in that function, nor was it passed to the function. I thought that, for sure, this wasn't going to work. But it did in yours and not in mine. What gives?
Nevermind! Got it. Firstly, I had the constants and current_page in a jQuery document.ready tag. I also had the functions above the constants and lets. Duh.
thanks u !!
Can you share your wallpaper? Love it
Thank you so much for your nice and insightful tutorial. I should say I am a newbie in JS, anyhow, I have added two functions for "Next" and "PREV". I guess they are working properly among the other functions.
adding the buttons inside the SetupPagination():
let next = document.createElement('button');
next.id = "next";
let prev = document.createElement('button');
prev.id = "prev"
var s = document.getElementsByTagName('button')[0]
prev.innerText = 'Previous';
next.innerText = 'Next';
wrapper.insertBefore(prev,s);
Next and Prev Functions:
function nextp (page,items,rows){
let page_count = Math.ceil(items.length/rows);
document.getElementById("next").addEventListener('click', () => {
let page = document.querySelector(".active");
if(parseInt(page.id) === page_count ){
} else {
current_page = parseInt(page.id) + 1;
DisplayList(items, list_element, rows, current_page);
page.classList.remove('active');
let pop = document.getElementById(current_page);
pop.classList.add('active');
}
});
}
function prevp (page,items){
document.getElementById("prev").addEventListener('click', ()=> {
let page = document.querySelector(".active");
if (parseInt(page.id)===1){
} else {
current_page = parseInt(page.id) - 1;
DisplayList(items, list_element, rows, current_page);
page.classList.remove('active');
let pop = document.getElementById(current_page);
pop.classList.add('active');
}
});
}
It didn't work for me, can you link your github so I can check out the code please and thank you
how do you limit the number of pages you see? for example 1...456...10.
Also how do you create a first and last page? I can't figure it out. by the way I'm just a novice.
Hi, have you managed to implement the page limit
Thank you very much, it was very useful to me. Please, I need to implement the same pagination but inside some tabs, and I'm losing the current tab when I change the page number.... Please, anyone does know how could I fix it?, or Where could I find information? Thank you so much...
Wao! so helpful. I am trying to replace the "list_item" content with object-object items in the JS file but my end result was blank, Tyler I need your help😟.
example:
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
Would you think this could be used if the content was already on the page?
Text, images and all types of fun!
Text, images and all types of fun!
Text, images and all types of fun!
Also this is great! Just having trouble wrapping my mind around how I want to tweak for my needs, but I keep coming back to your video..
I hope it helps but I'm not sure, I think you could use it? :)
CSS destroyed this demo, it gets in the way. i am newbie and this makes me wonder how to avoid CSS, unreadable code.
Тот случай когда понял язык не зная его
🙌
You could probably just skip the HTML/CSS on tutorials like these.
I agree but I feel like if I skip the HTML/CSS then someone will complain that I didn't do it... :)
@@TylerPotts better to create time-stamp to jump over the html/css for each likes :) i like your job, thanks :)
I don't know why most liked the video but to me video is like just copying pasting the youtuber code and straightway get a working code (pretty much like we already can from forums or searches) as only few things were explained, rest were just straightway writing without explanation. I simply didn't like the video
i came here just for the JS logic and it is really sad that although tutorial was good but because you speak sofast I stopped in middle of the video and wrote this comment and one more suggestion is where you are writing a logic please explain it clearly you speak fast and frequently change the things
Pause, rewind, and adjust playback speed.
Thanks for sharing this, you make it look simple and straight-forward.
Thanks! ❤️