Check data load more laravel livewire

#1

how to check last data perPage and hide the button load more

class Index extends Component
{

    public $perPage = 12;

    public function loadMore()
    {
        $this->perPage = $this->perPage + 12;
    }

    public function render()
    {
        $products = Product::latest()->paginate($this->perPage);

        return view('livewire.frontend.home.index', [
            'products'  => $products
        ]);
    }
}

<button wire:click="loadMore()" class="btn btn-dark btn-lg shadow-sm">Load More</button>

#2

So you need to add variables
public $hasMore = false;
public $currentPage = 0;

In template you would need to have something like this:

@if($hasMore)
    @livewire('livewire.frontend.home.index', ['page' => $currentPage + 1])
@else
   <button wire:click="loadMore()" class="btn btn-dark btn-lg shadow-sm">Load More</button>`
@endif

And you need a mount method to apply page to currentPage variable.

1 Like
Append Livewire response to DOM/HTML
#3

@Dimonka2 thanks bro, but the mount function like what ?

#4 
    public function mount($page)
    {
        $this->currentPage = $page;
    }

And then in the render function do not use paginate(). Use something like:

Product::latest()->offset($this->currentPage * $this->perPage)->limit($this->perPage)->get();
1 Like
#5

@Dimonka2, im get the error about mount function to get the $page, like the screenshot

Screen Shot 2020-05-29 at 16.49.23
Screen Shot 2020-05-29 at 16.49.232784Ă—1678 826 KB

#6

I see. Make then the following in mount declaration:

public function mount($page = 0)
1 Like
#7

@Dimonka2 work and no problem bro, but the button still there :grinning:

#8

That is correct. You need to change hasMore variable yourself :slight_smile:

    public function loadMore()
    {
        $this->hasMore= true;
    }
1 Like
#9

Ah and of cause you also need to think about a case when there is no “more”.

1 Like
#10

this is my problem bro @Dimonka2

#11

Count number of $products in render function and render “No more products” view in case of zero :wink:

1 Like
#12

thanks very much bro @Dimonka2 :wink: :love_you_gesture:

#13

Since $products is paginated, there should be Pagination accessor that will let you check if there are more pages.

In your blade component where you want the load more button to appear, you can use:

@if($products->hasMorePages())
    <button wire:click="loadMore()" class="btn btn-dark btn-lg shadow-sm">Load More</button>
@endif

There’s another topic where this is covered: Implement Load More Pagination if you need additional information or want to see a working example.

1 Like