Build Modern Laravel Apps Using Inertia.js - Ep 17, Pagination

so now that we've used eloquent to fetch information from the database and send it to the client the next step would be to implement pagination but before we do that let's take one minute to clean this up now because i'm using tailwind css why don't we save ourselves a little bit of design time and instead pull in one of these free components from the tailwind ui.com website maybe something like this so i can see the code here i can copy it and i'll switch to phpstorm we'll go to that users page and yeah we're going to swap out the ul with this table layout so i'm going to paste in the whole thing there's a lot to see here but it's really not that complicated and if i switch back and give this a refresh now we can tweak this to our needs for example i don't even think i need a table head so let's get rid of that all right and then next i don't need any of these so let's see here's our table rows here's the first one here's the second one let's get rid of that okay and then two more that one and that one and now we have a name and avatar and the edit link but i don't yet have any avatars so i can get rid of that alright and then it looks like i still have some leftover margin here because of the avatar that we deleted and then i'm not going to show an email address so that gives us this all right so this is what we end up with a standard table element with some classes to make it look nice and pretty so i think we're all set let's now migrate this section so i'll get rid of it and now for our table rows this is where we will perform our v4 before user and users we need to give it a key and actually on that note i'm not sure we passed through the id let's check that real quick let's go to my routes file and yeah notice i accidentally forgot to include the id so let's add that as well or if the id is something sensitive that you don't want the user to see you could always reach for a unique id anyways let's go on back and now i can swap this out with the user's name finally we don't have any kind of user edit link but if we did it would take the shape of something like this where the href would be potentially users slash the user's id slash edit and we can even make that look prettier if we switch to a template string like that all right let's have a look give it a refresh and now we have a nicely formatted table of all of our users and notice that each user includes a link to where we can edit that specific person okay design portion done next let's implement pagination now if you're familiar with laravel you already know that there is a paginate method we can reach for but this isn't quite right so if i come back and refresh yes i still see the same thing but if we have a look at view dev tools let's go down to our page and we have our users but there's nothing different it seems like it's partially working because we're not fetching 100 users anymore we only have 15. so for example if i change that to 10 at a time like this so yeah it seems like it's partially working but i'm missing information about the paginator what current page are we on what are the links things like that so here's what the issue is we called user all and then we mapped over it and when you map over a paginator you're effectively replacing that collection entirely so for example if i were to delete that and switch back i bet we're going to get some errors give it a refresh and yeah now it doesn't work anymore as you see there but this does mean we're on the right track so have a look at this if i were to just return this directly from the routes before we even touch inertia have a look what happens no longer are we returning a collection of only users but instead an object that yes contains all of the user's data that's now behind a data property but it also again has information about the paginator what page are we on what's the page to the first url what are we starting with what's the last page and even cooler there's this links property that contains all of the relevant links to build up your paginator on the fly and it can even tell you what page you're currently on all right so this is pretty cool i love how easy level makes this if i bring this back now i just have to update my users component to accept not an array of users but an object that represents that paginator okay now if we scroll back up we're going to iterate over not the users array but the array that's in users.data and you saw that just a minute ago okay so i think that should do it if we come back and give this a refresh we now get the same thing as before but take a look at this and view deb tools on our page yeah now this is what's being sent to our component we have the array of users but we also have a list of links to build up the paginator okay let's see if we can implement that so let's see maybe to start we'll do it here at the bottom and i'll say this is our paginator okay so we'll have this in a div maybe we'll give it a little margin top and you'll see effectively what we're going to do here so down here at the bottom we want a list of links okay so let's see once again how do we build this up we want to go into users dot links it's an array so we iterate over it and for each one it looks like we have a url and a label okay so maybe for each one we should display a link link v4 link in users.links next the href is going to be link dots url and then the text or the html will be link dot label and reformat and let's see the html can lead to x yes i'm aware of that it's not a problem here okay so i'm just grabbing that information here let's come back and give it a refresh scroll down to the bottom and it's not styled but notice i think it'll work so let's go to page 10 and notice the uri reflects that and we have fresh information so bella at the top let's go to page five and now we have odessa at the top everything's working so we have just a couple things to wrap up first if we're on page one well what would the previous link be if you're on page one let's see what that does well right now we are rendering a link that goes nowhere okay so let's see how that's rendered on the first page users links well actually most of them will contain a url but yeah on the first page there is no previous link so there is no url in that case which means i shouldn't render a link and the same would probably be true for the very last one or i'm sorry at least if we are on the last page there won't be a next link of course so if we take a look at that now notice the url is null in the cases where there's nowhere to link you okay so how do we want to do this i'll show you the long way and then maybe the cleaner way we could start by wrapping this in a template so we iterate over all of the links and for each one we render a link so we get something like that but then within here we could say well if we have a url only in that case should we render a link tag otherwise we should render a span tag and then here we'll set the html to link.label and yeah i think that will do the trick let's give it a shot refresh scroll down to the bottom and notice if i'm on the last page the next link is a span which is what we want so yeah at this point style it however you want to make it clear this is muted it's not clickable in the way that these other ones are but notice the previous link if we have a previous page is a anchor tag or an inertia link but if we're on page one sorry we don't have much real estate here in that case it would become a span okay so that works and this is entirely fine but another option is to use a view dynamic component to do that i'm going to bring this back to what we had before like this but instead of explicitly using a link component we're going to use this dynamic one and then i can use the isprop to declare what kind of view component it should use so for example if i wanted to repeat a link then i could do that and the same thing is going to work just like we had before okay so now we can build this up dynamically i can say if we have a url then it should be a link otherwise it should be a span and in fact this should do the trick so if i come back and give it a refresh notice we're going to get the same thing as we had before but notice we're using general spans where relevant and now finally we can add some basic classes here to make it look pretty like a little bit of padding around each and then actually why don't we do one that's dynamic if it's a span maybe the text should be gray to to signal you can't click on this so i could say once again link.url text or actually nothing in that case but otherwise text gray 400 or maybe 500. all right let's give it a shot come back refresh scroll down and there we go and that's good enough for our little demo here okay one or two more quick things and then i will let you go if you'd like we can extract this to a reusable view component and that way anytime you need a paginator it's up and ready to go okay let's go into resources js shared i'm gonna add a new view component here called pagination and then let's grab to start everything you see here and i'll paste that in but we don't want to assume merchant top so i will pass that in and then let's see what does it need here to function i guess all it really needs is a array of links so let's do that here and then iterate over the links rather than assuming that we have some kind of users object because it could be links for for anything that can be paginated all right i think that is good enough for now so if i switch back we can pull in our pagination component and we can send through the links like this and by the way notice phpstorm automatically imported that for us all right cross our fingers come back refresh and it failed okay let's see what i did wrong user is undefined oh i'm sorry users.links right one more time give it a refresh and yeah now it's working i did lose my margin there though so this is where i can pass it in on the fly and we should have exactly what we had before and i think that looks pretty good so finally the only remaining step is to return the mapping from our controller because right now once again our users array contains everything from the database so we can fix that by returning to our routes file and right here yeah remember how before when we called map we had something like this where we returned the id like this and the name but when we called map it replaced the paginator completely so we get a new collection we can fix this by changing it to through through is is almost the same as map but it's applied to the the current slice of items rather than returning a brand new collection so i think that should do the trick if we give it a refresh we have a look at users cross your fingers and yet now it's working just like it did before but now we have a working paginator and i think that we'll do i'm sorry actually one last little thing i keep telling you we're almost done 10 seconds and then i promise we're done if we go back to the paginator let's make sure that we highlight whether we're on the current page so we can do that maybe i'll rewrite this into the object form let's do text gray 500 if we don't have a next or previous link and then i'm going to say let's make it bold if we are the current page and you'll remember there was an active property available so now we have a little more indication as to what page you're currently on and with that we are finally done and ready for something else

Channel: Laracasts

Views: 707

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: YQaC1J8_Yx8

Length: 13min 8sec (788 seconds)

Published: Thu Nov 11 2021