Laravel + Livewire：如何修复分页元素获取方法错误

Question

菜鸟在这里。 请帮忙。

当我在输入框里搜索东西的时候，再清空输入框。 然后我单击任何分页元素：1、2、3、4、5，出现此错误。

此路由不支持 GET 方法。 支持的方法：POST。

这是 livewire 组件

搜索刀片 php

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
             {{--Previous Page Link--}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <li class="page-item disabled" aria-disabled="true">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <button class="page-link" wire:click="previousPage" rel="prev">&lsaquo;</button>
                </li>
            @endif

             {{--Pagination Elements--}}
            @foreach ($elements as $element)
                 {{--"Three Dots" Separator--}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                @endif

                 {{--Array Of Links--}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                        @else
                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

             {{--Next Page Link--}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <button class="page-link" wire:click="nextPage" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</button>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <li class="page-item disabled" aria-disabled="true">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

搜索-students.blade.php

{{-- CARD BODY --}}
<div class="card-body">
    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div id="example1_filter" class="dataTables_filter">
                    <label>Search:<input type="search" class="form-control form-control-sm" placeholder="" wire:model="searchText">
                    </label>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
                       aria-describedby="example1_info">
                    <thead>
                    <tr role="row">
                        <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending">First Name</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Last Name</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Image</th>
                    </thead>
                    <tbody>
                    @foreach($students as $student)

                        <tr role="row" class="odd">
                            <td class="sorting_1 dtr-control">{{ $student->FirstName }}</td>
                            <td>{{ $student->LastName }}</td>
                            <td><img src="StudentImage/{{ $student->ImageLink }}.jpg" width="120" height="150"></td>

                        </tr>
                    @endforeach
                    </tbody>

                    <tfoot>
                    <tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="col-sm-12 col-md-7">
            {{ $students->links('livewire.livewire-pagination') }}
        </div>
    </div>
</div>
</div>
{{-- card body --}}

Answer 1

我的解决方案是在组件类中使用分页，请查看https://stackoverflow.com/a/66778852/7995302

Answer 2

不幸的是，Livewire 将使用以下方法覆盖您在服务提供者中定义的自定义视图：Paginator::defaultView()。

使用任一方法时，不要在分页组件中使用锚标记，而应使用具有以下方法的 wire:click 处理程序：

nextPage 导航到下一页 previousPage 导航到上一页 gotoPage($page) 导航到特定页面。

有关默认 livewire 分页器如何工作的示例，请参见下文。

<div>
    @if ($paginator->hasPages())
        <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
            <span>
                {{-- Previous Page Link --}}
                @if ($paginator->onFirstPage())
                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                        {!! __('pagination.previous') !!}
                    </span>
                @else
                    <button wire:click="previousPage" wire:loading.attr="disabled" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                        {!! __('pagination.previous') !!}
                    </button>
                @endif
            </span>

            <span>
                {{-- Next Page Link --}}
                @if ($paginator->hasMorePages())
                    <button wire:click="nextPage" wire:loading.attr="disabled" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                        {!! __('pagination.next') !!}
                    </button>
                @else
                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                        {!! __('pagination.next') !!}
                    </span>
                @endif
            </span>
        </nav>
    @endif
</div>

Answer 3

首先你应该在这样的组件中使用 WithPagination

 use WithPagination;

并且不要忘记加载命名空间

use Livewire\WithPagination;

现在你可以使用链接方法了

 {{$data->links()}}

如果页码被隐藏，请在组件类中使用主题，例如

protected $paginationTheme = 'bootstrap';