Hi I'm trying to implement the pagination with laravel livewire pagination with multiple options, for example default paginationw would be with 20 items per page and When I select the 50 it should update the page with 50 items.
Everything is correctly setup, and is working fine except this change, when I change the option to 50 from 20, nothing happens.
But when I press either previous or next button it works but shows the 2 page.
(.png)
The livewire component name is opportunities
app/Livewire/Opportunities.php file
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Item;
class Opportunities extends Component
{
use WithPagination;
public $search = '';
public $perPage = 20; // Default number of items per page
public $options = [20, 50, 100, 250]; // Options for items per page
protected $queryString = ['perPage']; // Keep perPage in the URL
public function updatingPage()
{
\Log::info('Per Page Updated: ' . $this->perPage); // Log the new perPage value
$this->resetPage(); // Reset to the first page when perPage changes
}
public function render()
{
$items = Item::where('name', 'like', '%' . $this->search . '%')->paginate($this->perPage);
return view('livewire.opportunities', [
'items' => $items
]);
}
}
resources/views/livewire/opportunities.blade.php
<div>
<input wire:model="search" type="text" placeholder="Search...">
<!-- Items per page selection -->
<div>
<label for="perPage">Items per page:</label>
<select wire:model="perPage" id="perPage">
@foreach($options as $option)
<option value="{{ $option }}">{{ $option }}</option>
@endforeach
</select>
</div>
<!-- Items list -->
<div>
@foreach($items as $item)
<div>{{ $item->name }}</div>
@endforeach
</div>
<!-- Pagination links -->
{{ $items->links() }}
</div>
resources/views/components/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>
web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Livewire\Opportunities;
Route::get('/', function () {
return view('welcome');
});
Route::get('/opportunities', Opportunities::class);
can somehelp help me find any mistake or let me know if I'm missing something
Hi I'm trying to implement the pagination with laravel livewire pagination with multiple options, for example default paginationw would be with 20 items per page and When I select the 50 it should update the page with 50 items.
Everything is correctly setup, and is working fine except this change, when I change the option to 50 from 20, nothing happens.
But when I press either previous or next button it works but shows the 2 page.
(https://i.sstatic.net/QSLXqrqn.png)
The livewire component name is opportunities
app/Livewire/Opportunities.php file
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Item;
class Opportunities extends Component
{
use WithPagination;
public $search = '';
public $perPage = 20; // Default number of items per page
public $options = [20, 50, 100, 250]; // Options for items per page
protected $queryString = ['perPage']; // Keep perPage in the URL
public function updatingPage()
{
\Log::info('Per Page Updated: ' . $this->perPage); // Log the new perPage value
$this->resetPage(); // Reset to the first page when perPage changes
}
public function render()
{
$items = Item::where('name', 'like', '%' . $this->search . '%')->paginate($this->perPage);
return view('livewire.opportunities', [
'items' => $items
]);
}
}
resources/views/livewire/opportunities.blade.php
<div>
<input wire:model="search" type="text" placeholder="Search...">
<!-- Items per page selection -->
<div>
<label for="perPage">Items per page:</label>
<select wire:model="perPage" id="perPage">
@foreach($options as $option)
<option value="{{ $option }}">{{ $option }}</option>
@endforeach
</select>
</div>
<!-- Items list -->
<div>
@foreach($items as $item)
<div>{{ $item->name }}</div>
@endforeach
</div>
<!-- Pagination links -->
{{ $items->links() }}
</div>
resources/views/components/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>
web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Livewire\Opportunities;
Route::get('/', function () {
return view('welcome');
});
Route::get('/opportunities', Opportunities::class);
can somehelp help me find any mistake or let me know if I'm missing something
The issue is that by default, wire:model is not "live" anymore (as it was in Livewire v2). It's now updated in the front-end, but there is no request made until another action is triggered.
To achieve that changes to your input instantly refreshes the component, simply add .live to the wire:model, like so:
<div>
<label for="perPage">Items per page:</label>
<select wire:model.live="perPage" id="perPage">
@foreach($options as $option)
<option value="{{ $option }}">{{ $option }}</option>
@endforeach
</select>
</div>
Related docs:
https://livewire.laravel.com/docs/wire-model#live-updating