Laravel Livewire 分页
Posted
技术标签:
【中文标题】Laravel Livewire 分页【英文标题】：Laravel Livewire Pagination 【发布时间】：2021-01-21 03:01:32 【问题描述】：Laravel - 8.6.0 (Jetstream), Livewire - 2.2.7
除此之外，我还有两个简单的表格，其中包含使用 Livewire 呈现的搜索输入。两个 Livewire 组件的逻辑几乎相同，主要区别在于 DB 查询格式。在一个表中一切正常（搜索、分页），但在第二个表中，分页存在问题。
怎么了？ 当我单击分页链接时（例如，从第一页转到页面（2）），请求被发送，浏览器中的 URL 更改为正确的查询字符串，收到响应，但没有 html 部分响应，DOM 没有变化，分页显示第一页处于活动状态。如果我手动刷新页面，表格会显示第 2 页的数据，之后，我什至可以获取下一页或上一页的新数据，但只有在初始页面刷新后一次。如果我再次单击分页链接，则没有响应的 HTML 数据，没有 DOM 更改...
我尝试了什么？
-
我浏览了 Livewire 文档，尝试了“疑难解答”部分中的所有建议解决方案。
我多次检查我的代码，比较了 Livewire 组件和 Blade 视图，都没有发现一些明显的错误。
在过去的 10 天里，我一直在 SO、Livewire 论坛、Laracast 论坛上寻找答案……找到了一些很好的建议，尝试了大部分，但没有一个能解决我的问题。
消除了 DB 查询逻辑导致一些问题的可能性，即使我不使用复杂的记录过滤（例如，如果我只是对所有记录进行分页 - Model::all()->paginate(10)），问题也会退出.
有问题的表通过单选按钮有一些额外的记录过滤，我暂时删除了它，但问题仍然存在。
工作 Livewire 组件和 Blade 视图的代码：
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Extension extends Model
use HasFactory;
protected $guarded = [];
public function user()
return $this->belongsTo('App\Models\User', 'directory', 'ext');
public static function search($query)
return empty($query) ? static::query()
: static::where('directory', 'like', '%' . $query . '%')
->orWhere('mobile', 'like', '%' . $query . '%')
->orWhere('department', 'ilike', '%' . $query . '%')
->orWhere('name1', 'ilike', '%' . $query . '%')
->orWhere('name2', 'ilike', '%' . $query . '%');
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
class PhonebookTable extends Component
use WithPagination;
public $perPage = 10;
public $search = '';
public function render()
return view('phonebook.phonebook-table', [
'phonebook' => \App\Models\Extension::search($this->search)
->with('user')
->orderBy('directory', 'asc')
->paginate(10)
]);
/**
* Livewire Lifecycle Hook
*/
public function updatingSearch(): void
$this->resetPage();
<div>
<div class="flex items-center justify-between">
-- Search Input --
<div class="relative text-gray-700 focus-within:text-gray-600 m-2">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" class="w-6 h-6">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</span>
<input wire:model="search" type="search" name="q"
class="py-2 text-sm text-gray
bg-gray-100 rounded-md pl-10 focus:outline-none
focus:bg-gray-200 focus:text-gray-700"
placeholder=" __('Search...') "
autocomplete="off">
</div>
-- End Of Search Input --
-- PerPage Select Dropdown --
<div>
<span> __('Per page:') </span>
<div class="inline-block relative mr-2">
<select wire:model="perPage" class="block appearance-none w-full
bg-white border border-gray-400 hover:border-gray-500 px-4 py-2
pr-8 rounded shadow leading-tight focus:outline-none
focus:shadow-outline">
<option>10</option>
<option>25</option>
<option>50</option>
</select>
<div class="pointer-events-none absolute
inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757
6.586 4.343 8z" />
</svg>
</div>
</div>
</div>
-- End Of PerPage Select Dropdown --
</div>
-- Phonebook Table --
<div class="container p-2">
<table class="text-center w-full">
<thead class="bg-gray-400 flex text-white w-full item-center rounded-md">
<tr class="flex w-full py-2">
<th class="px-4 w-1/4"> __('Name1') </th>
<th class="px-4 w-1/4"> __('Name2') </th>
<th class="px-4 w-1/4"> __('Department') </th>
<th class="px-4 w-1/4"> __('Extension') </th>
<th class="px-4 w-1/4"> __('Mobile') </th>
</tr>
</thead>
<tbody class="">
@foreach ($phonebook as $directory)
<tr class="flex w-full py-2 hover:bg-gray-100">
<td class="px-4 w-1/4"> $directory->name1??$directory->name
</td>
<td class="px-4 w-1/4"> $directory->name2 </td>
<td class="px-4 w-1/4"> $directory->user->department??'' </td>
<td class="px-4 w-1/4"> $directory->directory </td>
<td class="px-4 w-1/4"> $directory->user->mobile??'' </td>
</tr>
@endforeach
</tbody>
</table>
</div>
-- End Of Phonebook Table --
-- Pagination and Records Count info --
<div class="p-2 bg-gray-200">
$phonebook->links('vendor.pagination.livewire-tailwind')
</div>
-- End Of Pagination and Records Count info --
</div>
不工作的 Livewire 组件和刀片视图的代码：
<?php
namespace App\Models;
use Illuminate\Support\Facades\Auth;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Livewire\WithPagination;
class Phonecall extends Model
use HasFactory;
use WithPagination;
protected $table = "md_phonecall";
// custom method for "live" searching from livewire component
public static function search($query)
return empty($query) ? static::query() : static::where('dialednumber', 'like', '%' . $query . '%')
->orWhere('startdate', 'like', $query)
->orWhere('starttime', 'like', $query)
->orWhere('chargednumber', 'like', '%' . $query . '%')
->orWhere('conditioncode', 'ilike', '%' . $query . '%');
// 'conditioncode' accessor for casting integer value from DB to String shown in table View
public function getConditioncodeAttribute($value)
switch ($value)
case 7;
return 'Incoming call (' . $value . ')';
case 8;
return 'Internal call (' . $value . ')';
case 10;
return 'Outgoing call (' . $value . ')';
case 15;
return 'Transfer call (' . $value . ')';
case 19;
return 'Outgoing call (' . $value . ')';
case 23;
return 'Missed call (' . $value . ')';
case 25;
return 'Internal call (' . $value . ')';
case 28;
return 'Outgoing call (' . $value . ')';
case 29;
return 'Outgoing call (' . $value . ')';
default;
return 'Unknown type (' . $value . ')';
// Local Scope for filtering only calls belonging to logged User
public function scopeMycalls($query)
return $query->where('chargednumber', '=', Auth::user()->ext)->orWhere('dialednumber', '=', Auth::user()->ext);
/**
* Scope a query to only include phone calls of a given type.
*
* @param \Illuminate\Database\Eloquent\Builder $query
* @param mixed $type
* @return \Illuminate\Database\Eloquent\Builder
*/
public function scopeOfType($query, $type)
if ($type === 'all') return $query->where('conditioncode', 'like', '%');
if ($type === 'incoming') return $query->where('conditioncode', '=', 7);
if ($type === 'outgoing') return $query->where('conditioncode', '=', 10)->orWhere('conditioncode', '=', 19)->orWhere('conditioncode', '=', 28);
if ($type === 'missed') return $query->where('conditioncode', '=', 23);
if ($type === 'internal') return $query->where('conditioncode', '=', 8)->orWhere('conditioncode', '=', 15)->orWhere('conditioncode', '=', 25);
public function scopePeriod($query, $from, $to)
return $query->whereBetween('startdate', [$from, $to]);
public function scopeOfExtension($query, $extension)
return $query->where('dialednumber', 'like', '%' . $extension . '%')
->orWhere('chargednumber', 'like', '%' . $extension . "%");
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
class MyPhonecallsTable extends Component
use WithPagination;
public $perPage = 10;
public $search = '';
public $calltype = 'all';
public function render()
return view('mycalls.my-phonecalls-table', [
'mycalls' => \App\Models\Phonecall::search(
$this->search
)->mycalls()
->ofType($this->calltype)
->orderBy('startdate', 'desc')->orderBy('starttime', 'desc')->paginate($this->perPage),
]);
/**
* Livewire Lifecycle Hook
*/
public function updatingSearchInput(): void
$this->resetPage();
<div>
<div class="flex items-center justify-between">
-- Search Input --
<div class="relative text-gray-700 focus-within:text-gray-600 m-2">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" class="w-6 h-6">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</span>
<input wire:model="search" type="search" name="q"
class="py-2 text-sm text-gray bg-gray-100 rounded-md pl-10 focus:outline-none focus:bg-gray-200 focus:text-gray-700"
placeholder=" __('Search...') " autocomplete="off">
</div>
-- End Of Search Input --
-- Call type selector --
@include('partials.calltypes')
-- End of Call type selector --
-- Paginator Select Dropdown --
<div>
<span> __('Per page:') </span>
<div class="inline-block relative mr-2">
<select wire:model="perPage"
class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
<option>10</option>
<option>25</option>
<option>50</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
</div>
-- End Of Paginator Select Dropdown --
</div>
-- Phonecalls Table --
<div class="container p-2" id="my-calls">
<table class="text-center w-full" id="my-calls-table">
<thead class="bg-gray-400 flex text-white w-full item-center rounded-md">
<tr class="flex w-full py-2">
<th class="px-4 w-1/5"> __('Date') </th>
<th class="px-4 w-1/5"> __('Time') </th>
<th class="px-4 w-1/5"> __('Duration') </th>
<th class="px-4 w-1/5"> __('Calling No') </th>
<th class="px-4 w-1/5"> __('Called No') </th>
-- <th class="px-4 w-1/6"> __('Call Type') </th> --
</tr>
</thead>
<!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->
<tbody class="">
@foreach ($mycalls as $mycall)
<tr class="flex w-full py-2 hover:bg-gray-100">
<td class="px-4 w-1/5">
\Carbon\Carbon::createFromFormat('Y-m-d',$mycall->startdate)->format('d.m.Y.')
</td>
<td class="px-4 w-1/5">
\Carbon\Carbon::createFromFormat('H:i:s', $mycall->starttime, 'UTC')->tz('Europe/Belgrade')->toTImeString()
</td>
<td class="px-4 w-1/5">
gmdate('H:i:s', $mycall->duration) </td>
<td class="px-4 w-1/5"> $mycall->chargednumber</td>
<td class="px-4 w-1/5"> $mycall->dialednumber</td>
-- <td class="px-4 w-1/6"> $phonecall->conditioncode</td> --
</tr>
@endforeach
</tbody>
</table>
</div>
-- End Of Phonecalls Table --
-- Pagination and Records Count info --
<div class="p-2 bg-gray-200">
$mycalls->links('vendor.pagination.livewire-tailwind')
</div>
-- End Of Pagination and Records Count info --
</div>
在等待任何建议的同时，我会尝试再安装一个干净的 Laravel/Jetstream/Livewire。 在此先感谢，非常感谢任何帮助！
【问题讨论】：
【参考方案1】：通过再次查看我的代码，我注意到模型类中有一些“剩余物”。 在模型类中不应该有 "use WithPagination;" Livewire trait！ 当我删除“使用”状态并清除视图缓存时，一切正常！
【讨论】：
谢谢@Igor，你真是个救命稻草！以上是关于Laravel Livewire 分页的主要内容，如果未能解决你的问题，请参考以下文章
未找到 InvalidArgumentException 视图 [layouts.app]。 Laravel-8 LiveWire-2
点击gotoPage方法后如何在livewire中调用JS函数？