Pagination with SvelteKit

[@aswinzero]

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 ❣️

[@Huntabyte]

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!

[@Allformyequine]

Omgosh same here LOL!! I had to make my own weird version ... till now!!! Thank you!

[@NotAllHeroesWearCapes-101]

In continuation of our tradition, here is my comment on how great your video is :)

[@Huntabyte]

Thank you Dheeraj!

[@dimitrisplastaras3026]

Always the most usefull topics.

[@Huntabyte]

Thanks Dimitris!

[@H3eNr1K]

Recently you just come up with everything I need to come forward in my project, thank you so much

[@Huntabyte]

You’re very welcome!

[@Solanaceously]

I'm convinced you and Joy Of Code conspired to talk about pages today

[@Huntabyte]

maybe we did maybe we didn’t 🫣😂

[@patricknelson]

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.

[@Huntabyte]

I’m glad to hear that!

[@codewithguillaume]

Again, an amazing video thanks !

[@Huntabyte]

You’re welcome, Guillaume!

[@Allformyequine]

AWESOME!!! Was hoping some knowledgeable SvelteKit guru would make a nice Pagination video!!

[@adimardev1550]

Thanks mate! very helpful 👌

[@nyashachiroro2531]

As always great useful Svelte content

[@Huntabyte]

Thank you!

[@Dev_dev_dev]

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.

[@Huntabyte]

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!

[@adrianfr05]

why is the path on 3:46 not written with backticks and the variables with a $???

[@Huntabyte]

Svelte Magic 🪄- you don’t need to include backticks or $ inside of attributes in Svelte components!

[@danielk.9321]

Good video, very useful

[@Huntabyte]

Thank you!

[@mikebit5497]

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?

[@mwlo8635]

Why are totalPages, currentPage, totalItems etc reactive? Wouldn’t that also work as normal variable?

[@Trav164]

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

[@Huntabyte]

When you update the pages, you should redirect the user to /whatever?limit=.

[@Trav164]

@@Huntabyte if you’ve got some sort of filter on the table, how would you persist that if you’re redirecting users though?

[@Huntabyte]

@@Trav164 through the search params :)

[@adamrichardlimb]

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.

[@kvetoslavnovak423]

Great video as usual! Any tips concerning the best SvelteKit way how to do Load more?

[@tomich20]

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.

[@tipeon]

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

[@tomich20]

@@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?..?

[@Huntabyte]

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!

[@kupyn]

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

[@Huntabyte]

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.

[@doemaeries]

might be a stupid question, but why do you use +page.ts and not +page.server.ts?

[@Huntabyte]

Wasn't hitting a private API in this case so there was no reason to make the trip to the server every time.

[@theshy6717]

Love the font, what's the name of it?

[@wandenreich770]

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

[@marcoantonio7648]

almost died in the sql with offset But great video

[@oscarvasquez5033]

Thanks!

[@Huntabyte]

You're welcome!

[@danielrios8037]

So easy explained, thanks a lot! Would it be possible to have a master detail mvp ?

[@Huntabyte]

What do you mean by master detail MVP?

[@danielrios8037]

@@Huntabyte a minimal example of a master detail crud

[@thirupparan421]

your videos are amazing. would you explain pagination page logic first show 5 page and after 5?

[@Loui3Hunna]

MVP!!

[@Huntabyte]

Thank you thank you!

[@tipeon]

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 ?

[@Huntabyte]

Just a quick example 😂 I want to say by default it sorts by PK but I could be wrong there!

[@TechBuddy_]

@@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

[@Huntabyte]

​@@TechBuddy_ Thanks for that info! Good to know, I usually orderby the field of my choosing but great info!