JavaScript Pagination in ~10 Minutes (Super EASY!!)
HTML-код
- Опубликовано: 12 июн 2024
- 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
*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
![DDG & Blueface - Top ft. Swae Lee [Music Video]](http://i.ytimg.com/vi/p2wIDXar9ns/mqdefault.jpg)
With was an awesome in a myriads of ways.
- Presentation
- clarity
- pace
- etc!
Thank you!
WOW! Thank you so much :)
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
Pagination takes several different forms all with different use cases!
Always always always love your content James.
Great work
Thanks so much. really appreciate it :)
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
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
Great point. It goes beyond the basics as covered in this video, but something worth calling out
@@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.
Love it! I’ll be looking forward to learning more about Astro in September!🤘🤘
YAYYY!! It's getting close!
@@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!
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?
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!
Amazing. Do you have a tutorial for a blog with React and Firebase (or other DB)?
This was perfect. Thank you
So glad you enjoyed it!
How about cursorbased 0:44 pagination? And 'infinitive' data like dates.
This is really nice man
So glad you think so@
what is the vs code theme you are using?? please mention
but what if the url not have limit and skip query
Which VS Code theme are you using?
This is my own theme - James Q Quick :)
That's Cool 🔥🔥🔥@@JamesQQuick
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.
Definitely will include publishing to prod!
thanks >
c'est pas plus facile getjson => create tab => read 10 first elements ?
James, how much money Astro pays for your ad?
None at all :) Thanks for clarifying that!
You can tell this guy has never worked on a production database before
Lol why is that?
@@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.
@@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.