In this video, I will show a really simple way to have a load more button to load more data from the database using livewire. It's gonna be all reactive since we are using livewire to send ajax requests back to the server to get the data we need.

Hello guys, today I'm going to be showing you how you can make a load more button to load more data from the database using Livewire.

And this is a pretty simple thing to do in Livewire and let's get right into it.

So what I've done is I've created a new Laravel application and I've made a Livewire component called users and I've registered that component as a route in the letterbox web route and I also have a cedar and I've seeded about 10 records into the database so Yeah, let's load some data into the views.

Right now we don't have anything here and let's just go ahead and load some users.

So we're gonna have a user key here and we're gonna load the user model query page name and First we need a public property to hold The And what's the page number that we want to load from?

And what we're going to have is a property called perPage and that's going to default to 5.

Now we're saying query all the data from the database and paginate them to 5 results.

That's why we don't have anything in the views.

So what I have is, let me go ahead and copy some, this is Tailwind UI stuff.

So what I'm gonna do is remove the things that I don't need hold on let's remove this and...

We're only going to have 2 fields, so name of the user and we can have an email of the user.

Now that we have users being passed into the view, what we can do is we can loop through them and then we have for each users, as a user, and we can add this in here Slow now, let's overlaid this with the Now let's populate this with the user name.

And then we have a user email if we give it a refresh and find variable user oh

yeah now we have user 5 users being loaded from the database.

And what we need now is a load more button to load the data in.

So here, just below this div, you can have this button.

Actually, let's just wrap this div so that we have some right let's call this load more See this 1 all right, let's Align this to middle so to align this we can flex and justify Right now we need some margin so we can add some margin to the top.

So to make this work what we need to do is to have just like you have something in view, view at click in Livewire we have something called wire click and we're gonna give it a method name that we want to call when this button is clicked.

So we're going to have a method on our livewire component called load and it's going to add per page.

So let's go ahead and make a method called load.

And what we can do is we can have this per page plus equal to the number of records you want to load when you click the load button so fingers crossed if this works we will have 10 records being loaded yeah there we go it works it's that easy So right now we don't have any more records and we don't want this button to show up whenever there is no records being loaded.

We are paginating so there are some paginator data being passed to the view so what we can do is we can have a users, we can have a user's total is greater than 0 is greater than 0 and we can check the user's count.

This is count, check if the users count is less than users total which is what we are

going to do is have an end if here end if,

reload now we have 10 database records in our database and we want to load 5 more when we press this button so when we press it there won't be any other records that needs to be loaded.

Alright, so I think that's it for this video.

Hope you guys learned something new and yeah, I'll be recording more videos soon.


Speaker 0: Hello guys, today I'm going to be showing you how you can make a load more button to load more data from the database using Livewire. And this is a pretty simple thing to do in Livewire and let's get right into it. So what I've done is I've created a new Laravel application and I've made a Livewire component called users and I've registered that component as a route in the letterbox web route and I also have a cedar and I've seeded about 10 records into the database so Yeah, let's load some data into the views. Right now we don't have anything here and let's just go ahead and load some users. So we're gonna have a user key here and we're gonna load the user model query page name and First we need a public property to hold The And what's the page number that we want to load from?

And what we're going to have is a property called perPage and that's going to default to 5. Then we can reference that here page. Now we're saying query all the data from the database and paginate them to 5 results. And now we don't see anything here. That's why we don't have anything in the views.

So let's add something. So what I have is, let me go ahead and copy some, this is Tailwind UI stuff. So what I'm gonna do is remove the things that I don't need hold on let's remove this and... Let's remove this head as well. We're only going to have 2 fields, so name of the user and we can have an email of the user.

And I'm going to remove these as well. Now that we have users being passed into the view, what we can do is we can loop through them and then we have for each users, as a user, and we can add this in here Slow now, let's overlaid this with the Now let's populate this with the user name. And then we have a user email if we give it a refresh and find variable user oh

Speaker 1: sorry my mistake user

Speaker 0: yeah now we have user 5 users being loaded from the database. And what we need now is a load more button to load the data in. So I have a pre-styled button here,

Speaker 1: so let me go ahead and grab it.

Speaker 0: Let me. So here, just below this div, you can have this button.

Speaker 1: Actually, let's just wrap this div so that we have some right let's call this load more See this 1 all right, let's Align this to middle so to align this we can flex and justify Right now we need some margin so we can add some margin to the top.

Speaker 0: So to make this work what we need to do is to have just like you have something in view, view at click in Livewire we have something called wire click and we're gonna give it a method name that we want to call when this button is clicked. So we're going to have a method on our livewire component called load and it's going to add per page. So let's go ahead and make a method called load. And what we can do is we can have this per page plus equal to the number of records you want to load when you click the load button so fingers crossed if this works we will have 10 records being loaded yeah there we go it works it's that easy So right now we don't have any more records and we don't want this button to show up whenever there is no records being loaded. So what we can do is we can wrap this.

We are paginating so there are some paginator data being passed to the view so what we can do is we can have a users, we can have a user's total is greater than 0 is greater than 0 and we can check the user's count. This is count, check if the users count is less than users total which is what we are

Speaker 1: going to do is have an end if here end if,

Speaker 0: reload now we have 10 database records in our database and we want to load 5 more when we press this button so when we press it there won't be any other records that needs to be loaded. So this button will hide. Fingers crossed, let's try it out. Load more. There we go.

Now there is no load more button. So let's try it again. Load more. There we go. Alright, so I think that's it for this video.

Hope you guys enjoyed. Hope you guys learned something new and yeah, I'll be recording more videos soon. See ya!

See all Mohamed Jinas transcripts on Youtube

Load more button using laravel livewire