Laravel Livewire: "Load More" Instead of Pagination
HTML-код
- Опубликовано: 8 сен 2024
- Quick tip for Laravel Livewire: how to change simple pagination, into "Load more".
Full Course "Practical Laravel Livewire from Scratch": laraveldaily.t...
- - - - -
Try our Laravel QuickAdminPanel: bit.ly/quickad...
Enroll in my Laravel courses: laraveldaily.t...
This approach feels inefficient.. I mean, "load more" should technically just load 10 records and add them to the existing list, and not always re-fetch the entire list. Is this possible with Livewire?
yeah, i agree, assuming that you have a thousands of records, that might take longer, gonna follow up this, hope there is a proper way
Well, you can load 10 records from the database and add that to the array. But it's still one query to the database each time, maybe a bit more efficient.
@@PovilasKorop is it possible to use wire:click on Load More button, then server sends the html for next page data to append to table using js events
@@hhaassiill not that I know of
I was gonna comment about this. Yes this is inefficient. If you want to do it the same way he did it in the video, you have to send the offset and the limit will be 10 in that case. Or else you just do a normal pagination but send the pagination next_page_url attribute and obtain the data from there 😉
Its bad that way, you always get and render all the results 10, 20, 30, 40 etc.. theres no way to make real load-more with livewire.
Well, you can load 10 records from the database and add that to the array. But it's still one query to the database each time, maybe a bit more efficient.
I guess you can do this when they add wire:append which is on the roadmap
For those who want to add some interactive behaviour, you could emit an event when more data is loaded, then listen for the even using js and scroll to the end of the element.
Thank you veryyy veryy much :)
Alem am nawa la kurdi ache :)
@@renwar lawanaya wabet :)
How about auto-loadmore by scrolling?
Thanks. Alternatively:
Component:
$model->paginate($this->amount);
View:
@if($model->hasMorePages())
loading button
@endif
Thx man, please more wirelive videos ✌🏼
Thanks from Azerbaijan 🇦🇿
Hi,
With Livewire+Bootstrap, I was not able to get to highlight the current selected page in pagination. Your little side note at @1:37 resolved this issue.
Thanks..
I want to know how users with role base can share same controller but content must me different for both role. Need best practice scenario. Example: hrController index show all the information of employee but other hand second role can access basic data of employee.
Super example
Good video! I have a question, what front end language do you recommend using with Laravel? Vue? Angular? Thanks!
Nice
What I hate about load more is that you can't easily take the user back to where they were before. They'd have to load more again until they are back to where they wanted to be at. Especially for people who like to see the live results right after they save or whatever
I used to use a website where it would load more upon scrolling down and omg it was so annoying whenever you would edit something and wanted to edit something near it... Had to scroll so many times my finger was sore for just a few items lol
Thanks ❤
Hey , can you please post a video on how to get the form value of HTML5 editor of bootstrap textarea
need help . my data loads fine but does not render default layout . just plain data
Great.... video
Anything similar for Inertia ? I even struggle for proper pagination...
Sir, I want scroll to render data automatically like facebook posts in rest api, how can i implement this? I'm sorry for my english is not good
Can you make a video for a form with image uploading and nested dropdown ( like country , city etc ) ? Also can you make a video for rating and reviews of items/products ?
- Image uploading with Livewire: it is on my to-do list for upcoming weeks, but generally it's all here laravel-livewire.com/docs/2.x/file-uploads
- Nested dropdown: ruclips.net/video/QoCvntbXvSk/видео.html and ruclips.net/video/pfSjRcudZVA/видео.html - also my component: livewirekit.com/components/parent-child-dependent-dropdowns
- Rating of products: livewirekit.com/components/livewire-star-rating
@@LaravelDaily Thanks a ton...
Hi! Thank you for this useful tutorial! Can you please guide me how to hide the button when there is no more record (in your example, 'Users' ) ? Thank a lot!
Well, you would have to calculate the count() of Users in the mount() method probably (or every time on render if you wish) and compare to the number of results. If it's equal - then set some variable like $loadMoreVisible = false; and then in Livewire blade add @if ($loadMoreVisible) ... @endif
@@PovilasKorop Thank you!
Will the function take() work if there are no records yet in the database?
Yes. It won't throw any errors, if that's what you mean, it will just return empty collection.
@@PovilasKorop oh okay. I tried it in the past on an empty table, using take(3) and it returned an error because the table is empty. I’ll give it a shot again
Hello sir, can you please tell us, After loading all values how can I hide the Load More.. button?
Answered in another comment: ruclips.net/video/EgjNDZxnJEU/видео.html&lc=UgwpbgSu2fLJcvcDq7d4AaABAg.9G-SEOT9Dtu9G-ya1WAges
@@PovilasKorop Got it thank you sir...
How would you hide your Load more button if all users are loaded?
I implemented it in a component in my recently released Livewire Kit: livewirekit.com/components/livewire-load-more-pagination
thanks a lot, Povilas Korop for sharing that . but I wanted to point an issue regarding this approach and if you have a better solution that would be great to share .
currently, we have a production app and we implemented the same approach but the page got slower when loading more records.... the reason isn't DB query but it's the payload that livewire returns. for example try to make 3gp slow connection in chrome and seed the db with 1k record and try to load more then check response payload size and check how much time the page takes to parse the returned html.
so the above problem is livewire problem ... i have made PR a long time ago to address it github.com/livewire/livewire/pull/903 . but unfortunately it didn't got merged .
Hi, very valid point, and I wouldn't advise using this approach, or Livewire in general, on a bigger size payload. It's a fundamental problem of livewire, re-rendering the whole view which may become quite large.
@@PovilasKorop yes i agree . thanks a lot
Hi, how do you think about that way to keep rendering only new records while avoiding re-render for already loaded records?
You're the best.
One small question plz :
Many people have solid experience in boostrap framework and uses Laravel,
So, is there a way to have laravel 8 without this tailwind utility ?
Personally, I use boilerplate 7 : html5boilerplate.com/
Thanks for your help to the community.
Sorry, The link to version '7' is here : github.com/rappasoft/laravel-boilerplate/releases/tag/v7.2.5
You can still use Laravel UI, it's based on Bootstrap.
Horrible example((( What if you on 10-th page? 100 or even more records from DB per one time? Maybe $users property and pushing new values to it is better solution?
And once more: what if no records found for next page?