问题
I am new to LiveWire and trying to build simple app with Laravel , jetstream and livewire
My application get data from DB and show in Table with Pagination. every thing is working fine but issue is when i click on any page I got URI '?page=2'
I dont want to see this URI in Url my blade is also simple as bellow
<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>
and 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>
Also livewire controller is
<?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,
]);
}
}
回答1:
You should have only one root item in your Livewire view livewire:item
. Move the
<div class="mt-4">
{{ $items->links() }}
</div>
either within the table
tag or create a big div
around everything.
<div>
<table>
// table stuff
</table>
<div class="mt-4">
{{ $items->links() }}
</div>
</div>
The ?page=2
for the second page is always appended, this is a correct behaviour. Your table should updated accordingly to the page selected.
回答2:
It worked as bellow Thanks to @Remul
use Livewire\Component;
use Livewire\WithPagination;
class ContactsTable extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function getQueryString()
{
return [];
}
}
来源:https://stackoverflow.com/questions/65925996/laravel-livewire-pagination-issue