Laravel LiveWire 分页问题答案

【问题标题】：Laravel LiveWire Pagination issueLaravel LiveWire 分页问题
【发布时间】：2021-05-01 16:36:27
【问题描述】：

我是 LiveWire 的新手，正在尝试使用 Laravel、jetstream 和 livewire 构建简单的应用程序

我的应用程序从数据库中获取数据并显示在分页表中。一切正常，但问题是当我点击任何页面时，我得到了 URI '?page=2'

我不想在 Url 中看到这个 URI 我的刀片也很简单

<x-app-layout>
     <x-slot name="header">
        </x-slot>
        <div class="py-2">
            <div class="mx-auto sm:px-2 lg:px-2">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <div class="flex flex-wrap">
              <livewire:item />
             </div>
              </div>
            </div>
        </div>
    </x-app-layout>

和 livewire:item

<table class="table-auto w-full">
                <thead>
                    <tr>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button>Image</button>
                            </div>
                        </th>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button wire:click="sortBy('sku')">SKU</button>
                                <x-sort-icon sortField="sku" :sort-by="$sortBy" :sort-asc="$sortAsc" />
                            </div>
                        </th>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button wire:click="sortBy('title')">Title</button>
                                <x-sort-icon sortField="title" :sort-by="$sortBy" :sort-asc="$sortAsc" />
                            </div>
                        </th>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button wire:click="sortBy('avg_pprice')">Price</button>
                                <x-sort-icon sortField="avg_pprice" :sort-by="$sortBy" :sort-asc="$sortAsc" />
                            </div>
                        </th>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button wire:click="sortBy('stock')">Stock</button>
                                <x-sort-icon sortField="stock" :sort-by="$sortBy" :sort-asc="$sortAsc" />
                            </div>
                        </th>
                        <th class="px-4 py-2">
                            <div class="flex items-center">
                                <button wire:click="sortBy('selling_price')">Sale Price</button>
                                <x-sort-icon sortField="selling_price" :sort-by="$sortBy" :sort-asc="$sortAsc" />
                            </div>
                        </th>
                        
                        <th class="px-4 py-2">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                        <tr>
                            <td class="border px-4 py-2"><img class="w-20" src='{{ $item->image}}'></td>
                            <td class="border px-4 py-2">{{ $item->title}}</td>
                            <td class="border px-4 py-2">{{ number_format($item->price, 2)}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
    
            <div class="mt-4">
            {{ $items->links() }}
            </div>

livewire 控制器也是

<?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use App\Models\item;
    use Livewire\WithPagination;
    
    class Items extends Component
    {
        use WithPagination;
        
        public $perPage = 10;
          
    
        public function render()
        {
            $items = Item::all();
     
            $items = $items->paginate($this->perPage);
            
            return view('livewire.items', [
                'items' => $items,
            ]);
    
        }
    }

【问题讨论】：

您的组件看起来不错。你能更新你的livewire:item 查看它现在的样子吗？
我的视图文件现在看起来像这样
...

{{ $items->links( ) }}
我认为 LiveWire 正在添加查询字符串
页面链接的url是什么？
Url 可以仅查询字符串，例如 ?page=2 ，有没有办法可以删除它以保持 URL 干净

标签： php laravel laravel-livewire jetstream

【解决方案1】：

感谢@Remul

use Livewire\Component;
use Livewire\WithPagination;

class ContactsTable extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public function getQueryString()
    {
        return [];
    }
}

【讨论】：

【解决方案2】：

您的 Livewire 视图中应该只有一个根项目 livewire:item。移动

<div class="mt-4">
  {{ $items->links() }}
</div>

在table 标记内或围绕所有内容创建一个大div。

<div>
    <table>
      // table stuff
    </table>
    <div class="mt-4">
      {{ $items->links() }}
    </div>
</div>

总是附加第二页的?page=2，这是正确的行为。您的表格应根据所选页面进行相应更新。

【讨论】：

感谢您的回复，是的，它只有 1 项 livewire:item 并且我移动了 DIV，但它仍然在 URL 中加载 URI，即使我创建了搜索框，那么搜索也会显示在 URL 中，我想它在 GET 而不是 POST 中发布数据...
或者我认为它在页面中添加查询字符串
是的，我更新了我的答案。附加page 是正确的。它确保您可以直接跳转到某个页面。
但我不想在 URL 中看到查询字符串以保持其干净......

【解决方案3】：

就我而言，我在相同的链接上使用和定义引导主题。

$users->links('pagination::bootstrap-4')

但是，在检查了这个问题之后，我尝试：

protected $paginationTheme = 'bootstrap';

这修复了我在键入要搜索的字符串后的分页链接错误。

【讨论】：