提问者:小点点

Laravel LiveWire分页问题


我是LiveWire的新手,尝试用Laravel、jetstream和LiveWire构建简单的应用程序

我的应用程序从数据库中获取数据,并通过分页显示在表中。一切都很好,但问题是当我点击任何一个页面时,我得到了URI'?页码=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:项目

<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,
            ]);
    
        }
    }

共2个答案

匿名用户

感谢@Remul,它工作得很好

use Livewire\Component;
use Livewire\WithPagination;

class ContactsTable extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

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

匿名用户

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

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

标记中,或者围绕所有内容创建一个大的div

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

?page=2对于第二页,始终追加,这是正确的行为。您的表格应根据所选页面进行相应更新。