I have a livewire LawyerComponent component where I have 2 searches on different models. In the view I cannot get the table corresponding to the search to return to page 1 when displaying the results of said search. It works for me in other components when I have only one search. I have not been able to find in the documentation how to tell $this->resetPage() the respective search. Here are my codes:
AbogadosComponent
public function updatingSearch(): void
{
$this->gotoPage(1);
}
public function updatingSearchJuzgados(): void
{
$this->gotoPage(1);
}
public function users()
{
if($this->rolExiste()){
$users = User::role($this->rol)
->where(function ($query) {
$query->where('name', 'like', '%' . $this->search . '%')
->orWhere('apellido', 'like', '%' . $this->search . '%')
->orWhere('email', 'like', '%' . $this->search . '%')
->orWhere('fono', 'like', '%' . $this->search . '%')
->orWhereHas('abogado', function ($subquery) {
// Búsqueda por el campo 'rut' en la relación de 1 a 1
$subquery->where('rut', 'like', '%' . $this->search . '%')
->orWhere('obs', 'like', '%' . $this->search . '%');
})
->orWhereHas('juzgados', function ($subquery) {
// Búsqueda por el campo 'name' en la relación de n a m con juzgados
$subquery->where('name', 'like', '%' . $this->search . '%');
})
->orWhereHas('competencias', function ($subquery) {
// Búsqueda por el campo 'name' en la relación de n a m con competencias
$subquery->where('name', 'like', '%' . $this->search . '%');
});
})
->orderBy('name', 'asc')
->paginate($this->numberRows);
}
else{
$users = $this->getEmptyPaginatedCollection();
}
return $users;
}
#[Computed()]
public function juzgados()
{
return Juzgado::where('name','like','%'.$this->searchJuzgados.'%')
->where('is_active', true)
->whereDoesntHave('abogados', function (Builder $query) {
$query->where('user_id', $this->userId);
})
->orderBy('name', 'asc')
->paginate($this->numberRowsJuzgado, pageName: 'juzgadosPage');
}
The view:
<div class="card-body">
<div class="row justify-content-between">
<div class="d-flex">
<span class="pt-2">Mostrar </span>
<select wire:model.live='numberRows' id="numberRows" class="form-select" style="width: 70px;">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<div class="col-6 ml-auto"> <!-- Aplicar ml-auto para alinear a la derecha -->
<input wire:model.live='search' name="search" type="search" class="form-control" placeholder="Buscar...">
</div>
</div>
</div>
<div class="table-responsive"> <!-- Agregar esta clase para hacer que la tabla sea responsiva -->
<table class="table mt-2">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Email</th>
<th scope="col">Fono</th>
<th scope="col">Rut</th>
<th scope="col">Estado</th>
<th class="text-right">Acciones</th>
</tr>
</thead>
<tbody>
@forelse($this->users as $user)
<tr wire:key="{{ $user->id }}">
<th scope="row">{{ $user->id }}</th>
<td>{{ $user->fullName() }}</td>
<td>{{ $user->email }}</td>
<td>{{ $user->fono }}</td>
<td>
@if($user->abogado)
{{-- {{ ($user->abogado)? $user->abogado->rut: 'No tiene' }}--}}
{{ $user->abogado->rut }}
@else
<span class="badge rounded-pill bg-secondary">No tiene</span>
@endif
</td>
<td>
@if($user->is_active)
<span class="badge rounded-pill bg-success">Activo</span>
@else
<span class="badge rounded-pill bg-secondary">Inactivo</span>
@endif
</td>
<td class="td-actions text-right">
<button class="btn btn-outline-success btn-sm d-inline" wire:click="competenciasUser({{ $user }})" title="Competencias"><i class="fas fa-light fa-layer-group"></i></button>
<button class="btn btn-outline-success btn-sm d-inline" wire:click="juzgadosUser({{ $user }})" title="Juzgados"><i class="fas fa-light fa-gavel"></i></button>
<button class="btn btn-outline-success btn-sm d-inline" wire:click="editUser({{ $user }})" title="Editar"><i class="bi bi-pencil-square"></i></button>
<button class="btn btn-outline-secondary btn-sm d-inline" wire:click="deleteUser({{ $user }})" title="Eliminar"><i class="bi bi-trash"></i></button>
</td>
</tr>
@empty
<tr>
<td colspan="4">No se encontraron abogados</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="pagination pagination-sm text-secondary justify-content-end">
{{ $this->users->links('vendor.livewire.bootstrap',['onPageChange' => 'updatingSearch']) }}
</div>
</div>
<div class="col-md-6">
<div class="row justify-content-between">
<div class="d-flex">
<select wire:model.live='numberRowsJuzgado' id="numberRowsJuzgado" class="form-select" style="width: 70px;">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<div class="col-10 ml-auto"> <!-- Aplicar ml-auto para alinear a la derecha -->
<input wire:model.live='searchJuzgados' name="searchJuzgados" type="search" class="form-control" placeholder="Buscar...">
</div>
</div>
</div>
<div class="table-responsive"> <!-- Agregar esta clase para hacer que la tabla sea responsiva -->
<table class="table mt-2">
<tbody>
@forelse($this->juzgados as $juzgado)
<tr wire:key="{{ $juzgado->id }}">
<td>{{ $juzgado->name }}</td>
<td class="td-actions text-right">
<button class="btn btn-outline-success btn-sm d-inline" wire:click="addJuzgadosUser( {{ $userId }}, {{ $juzgado->id }} )" title="Asignar"><i class="bi bi-plus"></i></button>
</td>
</tr>
@empty
<tr>
<td colspan="4">No se encontraron juzgados</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="pagination pagination-sm text-secondary justify-content-end">
{{ $this->juzgados->links('vendor.livewire.bootstrap',['onPageChange' => 'updatingSearchJuzgados']) }}
</div>
</div>
resetPage() has a $pageName parameter which by default is 'page'
For the second paginator where you set 'juzgadosPage' as the page variable name, you need to do this:
$thids->resetPage('juzgadosPage');
The same thing for gotoPage():
$thids->gotoPage(1, 'juzgadosPage');