set perPage in livewire Pagination

blade.php

<div>
    <label  for="perPage">Resultados por página:</label>
    <select  id="perPage"  wire:model="perPage">
	    <option  value="10">10</option>
	    <option  value="20">20</option>
	    <option  value="50">50</option>
    </select>
    </div>
    
    @foreach ($data  as  $item)
    <p>{{  $item->name  }}</p>
    @endforeach
</div>

.php

<?php

namespace  App\Livewire;

use App\Models\User;

use Livewire\Component;

class  Prueba  extends  Component
{

    public  $perPage = 10;
    
    public  function  render()
    {
    $data = User::paginate($this->perPage);
    return  view('livewire.prueba', ['data' => $data,]);
    }
}

I m trying to implement a pagination with a perPage to control the number of results the user can see per page but I m not getting it to work.

tykus

2 years ago

Level 104

You are not using the Livewire WithPagination trait, which means there is a full page reload and the change is lost.

To take advantage of Livewire's pagination features, each component containing pagination must use the Livewire\WithPagination trait.

https://livewire.laravel.com/docs/pagination#basic-usage

1 like

IgnacioB

2 years ago

Level 1

@tykus i tryed adding this and steel not working

DhPandya

2 years ago

Level 12

@ignaciob You're also missing {{$data->links()}} in your blade file.

1 like

IgnacioB

2 years ago

Level 1

@DhPandya yes

IgnacioB

2 years ago

Level 1

blade.php

<div>
    <label  for="perPage">Resultados por página:</label>
    <select  id="perPage" wire:change='update'  wire:model="perPage">
	    <option  value="10">10</option>
	    <option  value="20">20</option>
	    <option  value="50">50</option>
    </select>
    </div>
    
    @foreach ($data  as  $item)
    	<p>{{  $item->name  }}</p>
    @endforeach

    <div>
    	{{ $data->links() }}
    </div>
</div>

.php

<?php

namespace  App\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Pagination\Paginator;

class  Prueba  extends  Component
{
    use  WithPagination;
    public  $perPage = 10;
    
    public  function  update()
    {
	    $currentPage = 1;
	    Paginator::currentPageResolver(function () use ($currentPage) {
	    return  $currentPage;
	    });
	}
	
    public  function  render()
    {
	    $data = User::paginate($this->perPage);
	    return  view('livewire.prueba', ['data' => $data,]);
    }
}

i found this solution I don’t know if is the best one but it works

Please or to participate in this conversation.