Pagination with SvelteKit
HTML-код
- Опубликовано: 23 авг 2024
- This video isn't meant to be a follow-along video, but moreso a fast-paced explainer to give you some ideas of a couple different ways to you could handle pagination with SvelteKit & Prisma or any other 3rd party API. The first and most straightforward way is to follow suite with most API designs by using a couple search params (limit & skip). Another way is to use params for dynamic pages using only the page param number.
If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
📁 Final Source Code: github.com/hun...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- SvelteKit Pagination
- SvelteKit Load Function
- Prisma Pagination
- SvelteKit Queries
- SvelteKit Page Numbers
- Svelte Pagination
- Prisma Paging
- SvelteKit Pages
- SvelteKit Search Params
Bruh are u reading my mind, I've been doing pagination in sveltekit for almost 4 days and u dono how much I'm happy when i got this notification ❣️
I’m glad to hear that! There are some great pagination components to go along with this out there. Look up ‘Pagination svelte repl’ on Google for some ideas which may help you out a bit more!
Omgosh same here LOL!! I had to make my own weird version ... till now!!! Thank you!
In continuation of our tradition, here is my comment on how great your video is :)
Thank you Dheeraj!
Always the most usefull topics.
Thanks Dimitris!
Recently you just come up with everything I need to come forward in my project, thank you so much
You’re very welcome!
This is useful even for me; I’ve built all this stuff before over and over and over again… but in different stacks, frameworks & languages. It’s super interesting to see how someone does it in SvelteKit vs. Laravel or something.
I’m glad to hear that!
I'm convinced you and Joy Of Code conspired to talk about pages today
maybe we did maybe we didn’t 🫣😂
Again, an amazing video thanks !
You’re welcome, Guillaume!
AWESOME!!! Was hoping some knowledgeable SvelteKit guru would make a nice Pagination video!!
As always great useful Svelte content
Thank you!
Thanks mate! very helpful 👌
Good video, very useful
Thank you!
Very nice, great video as always! Do you have any plans to do infinite scrolling/lazy loading? I imagine you could do something similar to this, but when the user reaches the top/bottom of the element - ask for more data and put it into an array, saving the highest and lowest element you have retrieved from the DB to use as the starting position for future queries. I've never implemented this, so I don't know if Svelte slows down when you have that many elements on the page, especially if they're complicated.
Great video as usual! Any tips concerning the best SvelteKit way how to do Load more?
Great video! Any tips/resources on infinite scroll, or in other words appending the new page data on reaching a certain scroll point? We can't rerun "load," and if I'm using something like Prisma, I can't expose my DB by recreating the pagination in a function on the client side.
Cursor-based pagination would be a better fit for infinite scroll. Since this is a client side JS requirement, I’d probably setup a separate endpoint and issue fetch requests as you scroll just like you would with any other framework! Using {#await } along the way!
How would that work if you have data put in by the user that should persist through the different pages? Like a list of favorite songs the user can select? Do they persist if the user changes the page or will they get reset when after the reload?
Why are totalPages, currentPage, totalItems etc reactive? Wouldn’t that also work as normal variable?
Hmm I sort have an issue with this example cause the /products/page conflicts with /products/productId in a real life scenario .I know this wasnt your intention but you could maybe highlight it or something
almost died in the sql with offset
But great video
Thanks!
You're welcome!
your videos are amazing. would you explain pagination page logic first show 5 page and after 5?
Love the font, what's the name of it?
MVP!!
Thank you thank you!
Do you have an example of including an optional page size with a select or something?
After giving the user the option to change page size, I'm having difficulty refreshing the data or fetching the extra entities (example: going from pageSize: 10 => 50) Until I refresh the url params this doesn't work as it only updates the pagination links
When you update the pages, you should redirect the user to /whatever?limit=.
@@Huntabyte if you’ve got some sort of filter on the table, how would you persist that if you’re redirecting users though?
@@Trav164 through the search params :)
So easy explained, thanks a lot! Would it be possible to have a master detail mvp ?
What do you mean by master detail MVP?
@@Huntabyte a minimal example of a master detail crud
might be a stupid question, but why do you use +page.ts and not +page.server.ts?
Wasn't hitting a private API in this case so there was no reason to make the trip to the server every time.
thanks. My problem is when filtering, if i use the skip 30 param because im on page 3, i wont be getting the data i wanted.
Are you filtering your data in Javascript *after* the database query ?
If so ... don't do that. Add a WHERE clause to your SQL query
@@tipeon filtering on the query directly.. but if i do "select * from users where name like "%tom%" offset 10;" i will be missing the first 10 toms of the list, so the offset should be reset on every filtering?..?
I think in that case you would want to have an optional param that change the data retrieved from the DB *if* a filter is applied. Can certainly be done!
so what if i also have a serach bar? because right now i show paginated items, but if search query is in place i show all users
You would need some sort of conditional logic within the load function. Something to determine if it’s search to get the first X search results.
why is the path on 3:46 not written with backticks and the variables with a $???
Svelte Magic 🪄- you don’t need to include backticks or $ inside of attributes in Svelte components!
Erm .... You're using offset and limit *without* an order by clause. 😮
Are you insane or does prisma adds it for you under the hood ?
Just a quick example 😂 I want to say by default it sorts by PK but I could be wrong there!
@@Huntabyte postgres and MySQL order them in the order of insertion by default
edit: this feature is not guaranteed and might change in the future
Edit 2: The default behaviour only applies if you only insert and never update or delete the records
@@TechBuddy_ Thanks for that info! Good to know, I usually orderby the field of my choosing but great info!