php - Laravel Livewire 分页

Question

Laravel - 8.6.0 (Jetstream),
火线 - 2.2.7
除其他外，我有两个简单的表格，其中包含使用 Livewire 呈现的搜索输入。两个 Livewire 组件的逻辑几乎相同，主要区别在于 DB 查询格式。在一张表中一切正常(搜索、分页)，但在第二张表中存在分页问题。
怎么了？
当我点击分页链接时(例如从第一页 gotoPage(2))，请求被发送，浏览器中的 url 更改为正确的查询字符串，收到响应，但响应中没有 HTML 部分，DOM 中没有变化和分页显示第一页处于事件状态。如果我手动刷新页面，表格会显示第 2 页的数据，之后我什至可以获取下一页或上一页的新数据，但只能在初始页面刷新后获取一次。如果我再次单击分页链接，则没有 HTML 数据响应，也没有 DOM 更改...
我尝试了什么？

我已经阅读了 Livewire 文档，尝试了“疑难解答”部分中的所有建议解决方案。

我已经多次检查我的代码，比较了 Livewire 组件和 Blade View ，还没有发现一些明显的错误。

在过去的 10 天里，我一直在 SO、Livewire 论坛、Laracast 论坛上寻找答案，...找到了一些好的建议，尝试了其中的大部分，但没有一个能解决我的问题。

消除了 DB 查询逻辑导致一些问题的可能性，即使我不使用复杂的记录过滤(例如，如果我只是对所有记录进行分页 - Model::all()->paginate(10))，问题仍然存在。

有问题的表通过单选按钮有一些额外的记录过滤，我暂时删除了它，但问题仍然存在。

工作 Livewire 组件和 Blade View 的代码:

<?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-width="2" 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 组件和 Blade View 的代码:

<?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 phonecalls 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-width="2" 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 安装。
提前致谢，非常感谢任何帮助!

Answer 1

再看一遍我的代码，我注意到模型类中有一些“剩余部分”。
在模型类中不应该有 "use WithPagination;" Livewire 特性!
当我删除“使用”statemnets 并清除 View 缓存时，一切正常!