Pagination with SvelteKit

in this video we're going to take a look at some of the ways you might Implement pagination in your spoken application we're going to start off by going through a couple diagrams here and then we're going to move on to consuming from a third-party rest API as well as learning how to do so with Prisma so without pagination the web would be pretty crazy right if a user went to the items page the server would select all the items from the database and then just pass it in a massive payload back to the browser right usually there's some type of limit set up where the API will set some type of upper limit this is the max number of items you can request for any given page again this is normally defined by the API so in this case we just have a limit of 10. so if the user just goes to slash items they get the first 10 items from the table right and you can think of this as page one well we can also take in limit and Skip so limit you've seen that before basically we're passing how many of these items we want to the API we can also pass in skip which maps to offset here and basically that's saying hey Skip the first 10 and give me 10 more and this will be considered page two and a super high level is pretty much how it works right you define endpoints you then query your data based upon that information passed in in the query params and then return that data back to the users so let's look at an API that already has pretty solid pagination setup so we can get some inspiration and ideas and examples in the API we're going to take a look at is the dummy Json API and if we look at the products limit and Skip products endpoint here we can see that they're making a fetch request to products passing the query params of limit and skip both of which in this case equal 10 and then we could check the response here so it gives us an array of 10 products skipping the first 10 as well so we're starting at 11. it also gives us the total which we're going to use to determine how many pages we're going to have based on the limit so in this case if the limit is 10 we can have 10 total pages right because 10 times 10 is 100. so let's consume this API and see what it looks like to do so with socket so in the example application here we have a users page we're just rendering out a couple different users with their ID and their email address we don't have any pagination set up yet though nothing Beyond rendering those users however if we check out our page.ts file we can see that it kind of mirrors the dummy Json API right we're getting the limit in skip from the URL search params where default resulting the limit to 10 and the skip to 0. if nothing is provided so if they just go to slash users like we have here they're just going to get the first 10 users right and then I'm running a check here to say if the limit's over 100 then we're going to throw an error so we definitely want to set some type of upper bound and I'm sure that the W Json endpoint already has this setup but I'm just going to set it up here as well and then I'm just making a fetch request and passing in the limit and Skip and then returning that data back to the page.spel via the data prop and then rendering out those users on the page so let's see how we can Implement some pagination here so the first thing that we're going to do is we're going to set the page size variable so this how big are our Pages going to be or what is our default limit going to be it's going to be 10 for me but you could give your users the ability to adjust this just like you can in certain tables how you can adjust if it's 25 50 100 you can do that if you'd like the next thing we're going to need is the total number of items and remember it returns that to us in the response we can say total items is equal to data.users.total and then we want to get the total pages from the total items in the page size so we can set total pages to be equal to math.ceiling so total items divided by Page size and the reason we're doing math.ceiling here is because if we had 81 total items right and our page size is 10 if it was to round down we would only have eight pages when in reality we need nine total pages to see that last item okay so that's why we're using ceiling there and then we can come down here and we can just render out some links so I have a class set up called pagination which just adds some styling to these links nothing crazy but we want to render out a link for each page right so we can say each array total pages so we're going to make an array that's the same size as total pages so total pages in this case is going to be 10 so our array will have 10 different indexes right so we could say as underscore index and we will just leave the value as an underscore because we're not going to use it we're only going to be using the index here then I'm going to add a link and it's going to go to slash users question mark limit is going to be equal to page size and Skip is going to be equal to page size times the index then for the inner text here we'll just set this to index plus one now the reason that we're doing page size times index here is because if we're on page 1 right index is 0 which means page size 10 times 0 is going to equal 0 and that's what we want we don't want to skip anything we're on the first page so our index is always going to be one behind our actual page number which is why we have to add one to this to display it properly on our page so now if I save this and go back into our application we now have this pagination component set up here we can click on the different pages we're now on 11 through 20 on page two three so on and so forth and we can get what page we're currently on so we can actually highlight that active page we need to get import page so we can get the search params we'll then Set current page equal to number [Music] page.url.searchpreams.get we're going to get the skip or if no skip is passed we're going to make it zero and we're going to divide that by the page size and this will tell us what our current page is so then we can come down into our link here and adjust the styling based upon that data so our current page will be aligned with our index so if current page is equal to the index then we want to just change the color to Green so now we come back into our application we can see that 6 is being highlighted here if I go to Five we now have that highlighted and that's like the bare minimum dead simple pagination right now I know some of you may have search param phobia where you don't want anything in the address bar which is pretty crazy to me considering that some of the most popular applications out there use a ton of query strings but we can clean this up a bit we just lose a bit of functionality without doing a bunch of extra work so I'm going to show you another way that we can do this while cleaning it up a bit so let's just create a new route we're going to call it products and we're also going to have a page inside of brackets inside of it right so it's going to be our param we're going to have a page.ts in here as well as a page.svelt and I'm just going to copy over this one here like so I'm also going to make a plus page.ts in the root of this products directory and then all we're going to do inside of this root page.ts is throw redirect to the first products page so if someone goes to slash products they're going to get taken to slash product slash one so let's have a load function inside of the brackets page or the print page params page.ts file I said page like 10 times there and we're just going to take in the params and we're going to get page is going to be equal to number params.page I'm sure you already can predict where I'm going with this so we'll do get products page is going to be a number the limit is going to be 10 and then we'll set up this pretty much the same request we made earlier and let me just bring in Fetch here as well so now here what we're doing is we kind of lose the ability for the user to set the limit so of course there are ways you can get around this you could do some type of cookie or something crazy um to pass this information between the server and the client but basically we're hard coding the limit here in our page.ts and then what we're doing is we're passing that into the dummy Json endpoint along with skip except skip now is Page minus one times limit so if you think about this it's kind of the opposite of what we're doing in the previous example right so we're getting the page which is page one we're taking one off it to put it at zero and then multiplying it by the limit and that'll give us the limit that we would expect for whatever given page right so I went ahead and adjusted this to products then we can actually simplify this link a bit here so we can change this link to just do products slash index plus one so we want to go to the next page right and now if we go take a look at our products page you're going to see that we have our products here and then as we navigate to each Different Page we're getting the page we might expect to get now one thing I forgot to change is the current page here so we're not going to do this anymore instead we're going to convert page Dot params.page into a number and then subtract one from that like so so now we're on page four here if we're on page five the correct number should be highlighted now last we're going to cover is doing the same thing except with Prisma so I essentially have the same setup as I had on the products page except now I'm using a page.server because we're going to be interacting directly with our database through Prisma so I've went ahead and set this up here but what I will do is I would set up a function called get songs we're going to be getting some songs from a dummy database here I'm going to set the limit again just as we did before and then song is actually going to be away prisma.song dot find many and what Prisma allows you to do is pass in skip so for skip here we'll skip page minus one times the limit just as we did with the other endpoint and then take is actually our limit so we can just pass a limit like so and then we'll just return those songs like this then we can actually get the total songs fairly easily as well so we can say get song counts of course you could just return this function directly and we'll just return await prisma.song.com.count like so and then for this whole load of function we're going to heard songs as get songs and we'll return the total songs as get song Count this way they run concurrently I'm pretty sure we could actually just do this as well just return uh prisma.song.com here instead of going through all that work up there and then now on our page that's felt we should have everything the same all I did was change products to songs just as we did before and then for total items now it's gonna be data dot total songs instead of data.songs.total so now if I go to songs we're going to see that I get the first 10 songs and I click through here you can see that pagination works just as you might expect there's a couple different ways you can do pagination of course there's obviously the way that you can just dump the entire data set in your client side and then manage the navigation that way by just shuffling through filters and stuff but this is the more spell kit way to do it ideally probably with the query strings but this way works as well if you want to just do page numbers like this you would just have to find some other way to pass the limit if the user was to be able to change that on your client side so that's gonna include this video I hope it's been informative for you if you got value out of the video don't forget to drop a like thank you all so much for your support and I will see you in the next one [Music]

Channel: Huntabyte

Views: 7,370

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, api route svelte, svelte routes, layouts, advanced layout sveltekit, sveltekit icons, sveltekit extensions, sveltekit productivity, svelte search, svelte react, svelte searchbar, svelte filtering, svelte stores, how to add search to svelte, search data svelte, svelte data search, redis sveltekit, sveltekit cache

Id: G-tafjJzfQo

Length: 9min 33sec (573 seconds)

Published: Fri Apr 07 2023