Laravel LiveWire Pagination issue

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

Your component looks right. Can you update your `livewire:item` view how it looks now? — codedge, Jan 27 '21 at 19:55
Url is ok only query string like ?page=2 , is there way I can remove this to keep URL clean — Mr.SH, Jan 28 '21 at 07:09

score 6 · Answer 1 · answered Jan 28 '21 at 14:49

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

codedge · Answer 2 · 2021-01-27T20:02:19.263

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.

edited Jan 27 '21 at 20:02

answered Jan 27 '21 at 19:29

codedge

4,754
2
22
38

Thanks for your reply, Yes its only 1 item livewire:item and Also I move the DIV but its still loading URI in URL even If I make search box then search is also showing in URL , I think its posting data in GET not POST... – Mr.SH Jan 27 '21 at 19:53
Or I think its Adding query string to pages – Mr.SH Jan 27 '21 at 20:01
yes, I updated my answer. Appending `page` is correct. It ensure that you can directly jump to a certain page. – codedge Jan 27 '21 at 20:02
But I dont want to see query string in URL to keep it clean.... – Mr.SH Jan 27 '21 at 20:12

score 0 · Answer 3 · answered Jan 09 '22 at 19:04

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.

Laravel LiveWire Pagination issue

3 Answers3

Linked