Laravel LiveWire Pagination issue - php

Question

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

Answer 1

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 [];
}
}

Answer 2

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.

Answer 3

In my case, i use and define bootstrap theme on the same links.
$users->links('pagination::bootstrap-4')
but, after check this question, i try:
protected $paginationTheme = 'bootstrap';
That fix my error with the pagination links after type string to search.