I used Laravel v8x, with Livewire and I need to use pagination with this livewire.
When I try to make a pagination page from the admins’ collection, I got this error.
I need to make pagination with livewire search
Blade
<div class="card-datatable table-responsive pt-0">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
<livewire:admin-search />
</div>
</div>
Livewire blade
<div>
{{-- Stop trying to control. --}}
<div class="d-flex justify-content-between align-items-center header-actions mx-1 row mt-75">
<div class="col-sm-12 col-md-4 col-lg-6">
<div class="dataTables_length" id="DataTables_Table_0_length"><label>عرض <select wire:model="row_no"
name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="form-select">
@if ($admin_count <= 15)
<option value="15">15</option>
@else
@for ($i = 1; $i <= $admin_count; ++$i)
@if ($i % 15 == 0)
<option value="{{ $i }}">{{ $i }}</option>
@elseif ($i + 1 > $admin_count)
<option value="{{ $i }}">{{ $i }}</option>
@endif
@endfor
@endif
</select> المسؤولين</label></div>
</div>
<div class="col-sm-12 col-md-8 col-lg-6 ps-xl-75 ps-0">
<div
class="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end align-items-center flex-sm-nowrap flex-wrap me-1">
<div class="me-1">
<div id="DataTables_Table_0_filter" class="dataTables_filter">
<label>بحث :<input type="search" class="form-control" placeholder="" wire:model="searchTerm"
aria-controls="DataTables_Table_0"></label>
</div>
</div>
@can('Create-admin')
<div class="dt-buttons btn-group flex-wrap"><button class="btn add-new btn-primary mt-50" tabindex="0"
aria-controls="DataTables_Table_0" type="button" data-bs-toggle="modal"
data-bs-target="#modals-slide-in"><span>اضافة مسؤول جديد</span></button>
</div>
@endcan
</div>
</div>
</div>
<table class="user-list-table table dataTable no-footer dtr-column" id="DataTables_Table_0" role="grid"
aria-describedby="DataTables_Table_0_info">
<thead class="table-light">
<tr role="row">
<th class="control sorting_disabled" rowspan="1" colspan="1"
style="width: 47.3281px; display: none;" aria-label=""></th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
style="width: 5px;" aria-label="User: activate to sort column ascending">#</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
style="width: 109.984px;" aria-label="User: activate to sort column ascending">الاسم</th>
<th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
colspan="1" style="width: 123.109px;" aria-sort="descending"
aria-label="Email: activate to sort column ascending">البريد</th>
<th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
colspan="1" style="width: 123.109px;" aria-sort="descending"
aria-label="Email: activate to sort column ascending">الهاتف</th>
<th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
colspan="1" style="width: 123.109px;" aria-sort="descending"
aria-label="Email: activate to sort column ascending">العمر</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
style="width: 139.875px;" aria-label="Status: activate to sort column ascending">حالة الحساب</th>
@canany(['Update-admin', 'Delete-admin'])
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 173.734px;"
aria-label="Actions">الإعدادات</th>
@endcanany
</tr>
</thead>
<tbody>
@php
$counter = 1;
@endphp
@foreach ($admins as $admin)
<tr>
<td>
{{ $admin->id }}
</td>
<td>
{{ $admin->fname . ' ' . $admin->lname }}
</td>
<td>
{{ $admin->email }}
</td>
<td>
{{ $admin->phone }}
</td>
<td>
{{ $admin->age }}
</td>
<td>
<span
class="badge badge-glow @if (!$admin->active) bg-danger @else bg-success @endif">{{ $admin->status }}</span>
</td>
@canany(['Update-admin', 'Delete-admin'])
<td>
<div class="btn-group" role="group" aria-label="Basic example">
@can('Update-admin')
<a href="{{ route('admins.edit', Crypt::encrypt($admin->id)) }}"
class="btn btn-primary waves-effect waves-float waves-light">تعديل</a>
@endcan
@can('Delete-admin')
<button type="button" onclick="confirmDestroy({{ $admin->id }}, this)"
class="btn btn-danger waves-effect waves-float waves-light">حذف</button>
@endcan
</div>
</td>
@endcanany
</tr>
@php
++$counter;
@endphp
@endforeach
<tr class="odd" wire:loading>
<td valign="top" colspan="6" class="dataTables_empty">يبحث...</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="row">
<div class="col-12 align-items-center text-center">
{{ $admins->links() }}
</div>
</div>
</div>
Livewire Compnent
<?php
namespace App\Http\Livewire;
use App\Models\Admin;
use Livewire\Component;
use Livewire\WithPagination;
class AdminSearch extends Component
{
use WithPagination;
public $searchTerm;
public $row_no = 10;
public $admins;
public $admin_count = 0;
public function mount()
{
$this->admin_count = Admin::getByAuthUserInfo()->count();
}
public function render()
{
$this->admins = Admin::orWhere([
['fname', 'Like', '%' . $this->searchTerm . '%'],
])
->where('user_id', auth('user')->user()->id)
->orderBy('fname')
->take($this->row_no)
->paginate(12);
return view('livewire.admin-search');
}
}
And the index function from the AdminController
public function index()
{
// Check Ability
$this->checkUserAbility('Read-admin');
//
$admins = Admin::getByAuthUserInfo()->get();
$roles = Role::where('guard_name', 'admin')->get();
// Store Log
$this->storeUserLogs('browse admins');
return response()->view('cms.admins.index', [
'admins' => $admins,
'password' => $this->generateNewPassword(8),
'roles' => $roles,
]);
}
And also I tried to make it from the index function in the controller, and it work correctly but it doesn’t change the table content in the table
Index controller function in AdminController
public function index()
{
// Check Ability
$this->checkUserAbility('Read-admin');
//
$admins = Admin::getByAuthUserInfo()->paginate(12);
$roles = Role::where('guard_name', 'admin')->get();
// Store Log
$this->storeUserLogs('browse admins');
return response()->view('cms.admins.index', [
'admins' => $admins,
'password' => $this->generateNewPassword(8),
'roles' => $roles,
]);
}
Result images
>Solution :
hey you solution is very simple,
you got this error because livewire cannot defined collection var after page render
instead of define admins variable in public of component just pass by view in render function
$admins = Admin::orWhere([
['fname', 'Like', '%' . $this->searchTerm . '%'],
])
->where('user_id', auth('user')->user()->id)
->orderBy('fname')
->take($this->row_no)
->paginate(12);
return view('livewire.admin-search',['admins']);
and delete your public variable