laravel - Laravel + Livewire:如何修复分页元素获取方法错误
问题描述
菜鸟在这里。请帮忙。
当我在输入框中搜索东西时,再次清除输入框。然后我单击任何分页元素:1、2、3、4、5,我收到此错误。
此路由不支持 GET 方法。支持的方法:POST。
这是 livewire 组件
search.blade.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">‹</span>
</li>
@else
<li class="page-item">
<button class="page-link" wire:click="previousPage" rel="prev">‹</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')">›</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">›</span>
</li>
@endif
</ul>
</nav>
@endif
search-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 --}}
解决方案
不幸的是,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>
推荐阅读
- javascript - 元素滚动无法从数据库加载更多数据
- neural-network - 导入 mxnet 库时出现“OSError: [WinError 126] The specified module could not be found”
- ios - 导航到另一个 ViewController 时 UITableView 行有问题
- sql - 如何计算一个列的值取决于以前使用 Joins 动态计算的值?
- java - Spring Boot 和 AngularJS 部署
- uitableview - 从 UITableViewCell 类到视图控制器执行 segue
- ios - 在 Objective-C 中为标签编码 UTF-8
- laravel - 如果在 laravel eloquent 上完成循环创建或更新,我如何返回 true 或 false?
- google-bigquery - 错误:无效的时间戳:'2017/05/16 19:33:49' BIGQUERY
- python - 使用 np.testing 测试非严格不等式