Laravel LiveWire Pagination issue

0
votes

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,
            ]);
    
        }
    }
2
phplaravellaravel-livewirejetstream
Your component looks right. Can you update your livewire:item view how it looks now? – codedge
my view file now look like this <div> <table> ... </tbody> </table> <div class="mt-4"> {{ $items->links() }} </div> </div> – Mr.SH
I think LiveWire is adding query string – Mr.SH
What are the urls on the page links? – Brett
Url is ok only query string like ?page=2 , is there way I can remove this to keep URL clean – Mr.SH

2 Answers

4
votes

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

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.