JavaScript Pagination in ~10 Minutes (Super EASY!!)

Рет қаралды 27,284

11 ай бұрын

Improve your website's user experience by learning Pagination in JavaScript. This video takes you step-by-step through the process, using a dummy JSON API for products as an example. Learn to avoid loading too much data at once, and instead deliver a smoother, faster browsing experience. We'll explore a few different way to handle pagination: client-side, statically generated pages, and server side rendered pages.
Learn Astro 3.0 - astrocourse.dev/
*** Resources ***
Diagraming with Eraser - app.eraser.io
Dummy Data API - dummyjson.com/docs/products
**DISCORD**
Join the Learn Build Teach Discord Server 💬 - discord.gg/vM2bagU
**STAY IN TOUCH 👋**
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
**QUESTIONS ABOUT MY SETUP**
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
00:00 Introduction
01:24 Pagination Explained with Diagrams
05:42 Client-side Pagination Demo
08:35 SSG Pagination with Astro
11:45 SSR Pagination with Route Parameters
12:25 Astro Course and Outro

Пікірлер: 37

@CreativeTutorialsWeb 11 ай бұрын

Always always always love your content James. Great work

@JamesQQuick 11 ай бұрын

Thanks so much. really appreciate it :)

@gioba4912 11 ай бұрын

With was an awesome in a myriads of ways. - Presentation - clarity - pace - etc! Thank you!

@JamesQQuick 11 ай бұрын

WOW! Thank you so much :)

@PJlikePajamas 11 ай бұрын

Love it! I’ll be looking forward to learning more about Astro in September!🤘🤘

@JamesQQuick 11 ай бұрын

YAYYY!! It's getting close!

@PJlikePajamas 11 ай бұрын

@@JamesQQuick I’ve been reading through the docs today so I’m at least somewhat familiar. Looks awesome, can’t wait to see it in action!

@soniablanche5672 11 ай бұрын

skip/limit is pretty bad if you have a lot of rows. The database is actually iterating through all the items until it reaches the last item to skip. It's better to have some sort of index to use as a reference and fetch only the rows that have an index bigger than the reference index + limit

@marcoio8742 11 ай бұрын

Totally agree with you. Especially, nowadays with db that charge per usage like PlanetScale where you are billed per row read and written. Going up with the items, you end up reading a 1000 rows to then return 100 (that's a weird way SQL works honestly). Personally, I am using a method that I read somewhere which is working pretty nicely. You keep the limit to decide the size of the page, and then you receive the last id and when you fetch you use that as a start so you never read more than the number of rows you actually need

@JamesQQuick 11 ай бұрын

Great point. It goes beyond the basics as covered in this video, but something worth calling out

@charlesscholton5252 3 ай бұрын

@@JamesQQuickI think the introduction of these advanced concepts early on to people will help them understand how important it is. I know I had to learn the hard way from following simple examples that kept me in the dark. It is a very frustrating experience for people to go through.

@maxzapom 23 күн бұрын

This was very interesting thanks

@melodium10 11 ай бұрын

The perfect explanation doesn't exi- but i thought that pagination is something where there are buttons 1, 2, 3 til the end and u click one of them and go to a page. never thought it was a single page thing too

@JamesQQuick 11 ай бұрын

Pagination takes several different forms all with different use cases!

@gliderguld 11 ай бұрын

How about cursorbased 0:44 pagination? And 'infinitive' data like dates.

@derekbaker_ 11 ай бұрын

This was perfect. Thank you

@JamesQQuick 11 ай бұрын

So glad you enjoyed it!

@89tain 10 ай бұрын

This is really nice man

@JamesQQuick 10 ай бұрын

So glad you think so@

@AndreSpecht 11 ай бұрын

Amazing. Do you have a tutorial for a blog with React and Firebase (or other DB)?

@Joe-SoftwareEngineer 11 ай бұрын

For the 1st kind of pagination that you mentioned, why not just pass the page number instead of the skip and calculate the skip server-side?

@JamesQQuick 11 ай бұрын

It gives more flexibility to the frontend if the backend accepts both. Different apps may decide to display more/less items at a time. BUT using page number could definitely work!

@codegenesis2130 5 ай бұрын

what is the vs code theme you are using?? please mention

@simoid6246 3 ай бұрын

but what if the url not have limit and skip query

@user-ir2vf2nw6d 11 ай бұрын

thanks >

@la009895 11 ай бұрын

For your Astro course, if you include how to deploy it to prod. Aka the web, I will buy it. I can get projects to run locally but as soon as it’s time to deploy I get lost.

@JamesQQuick 11 ай бұрын

Definitely will include publishing to prod!

@defaultname5607 3 ай бұрын

c'est pas plus facile getjson => create tab => read 10 first elements ?

@rajajunaidf 11 ай бұрын

Which VS Code theme are you using?

@JamesQQuick 11 ай бұрын

This is my own theme - James Q Quick :)

@rajajunaidf 11 ай бұрын

That's Cool 🔥🔥🔥@@JamesQQuick

@user-qp6yp4qk9i 11 ай бұрын

James, how much money Astro pays for your ad?

@JamesQQuick 11 ай бұрын

None at all :) Thanks for clarifying that!

@jasonwelsh417 8 ай бұрын

You can tell this guy has never worked on a production database before

@JamesQQuick 8 ай бұрын

Lol why is that?

@jasonwelsh417 8 ай бұрын

@@JamesQQuick Your example would have the database iterating until the last row instead of utilizing an index. If you have a large database this is a bad idea.

@charlesscholton5252 3 ай бұрын

@@jasonwelsh417 sshhh.. you are revealing too much arcane secret knowledge. I make jokes about how much of these things work great until the database grows or when encountering and dealing with large amounts of data.