I'm really struggling to get my head round pagination in Livewire. I'm using a dashboard which adjusts the main-content section based on a link clicked on the sidebar, and so far everything works. The code for that is

<div class="main-content" wire:key="{{ $currentContent }}">
   @livewire($currentContent, key($currentContent))
</div>

I have a Livewire component which is grabbing the data for me, paginating it and supposedly passing it to the rendered component.

<?php

namespace App\Livewire\Pro\Dashboard;

use Livewire\WithPagination;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Pagination\LengthAwarePaginator;

class Earnings extends Component
{

use WithPagination;

public $bookings;
public $stats;
public $pagination;
public $paginationLinks;
public $totalBookings;

public function mount() {

    $this->bookings = [];

}

public function render()
{

    $this->bookings = Auth::user()->cleaner->bookings()
    ->with([
        'cleanType:id,name',
        'availabilities' => function($query) {
            $query->limit(1); // Restrict to the first availability
        },
        'customer.user:id,first_name,surname'
    ])
    ->where('status', '!=', 'pending')
    ->orderBy('date', 'desc')
    ->paginate(5);

    return view('livewire.pro.dashboard.earnings', ['bookings' => $this->bookings]);

}

as you can see I've tried a few little hacks to get going, but still nothing. I'm now getting an error which is followed by a complete dump of my paginated object

Property type not supported in Livewire for property:

The blade file seems ok, and I can dd($bookings) to great effect, but can't get into the @foreach loop on the next line.

Any ideas?

I'm really struggling to get my head round pagination in Livewire. I'm using a dashboard which adjusts the main-content section based on a link clicked on the sidebar, and so far everything works. The code for that is

<div class="main-content" wire:key="{{ $currentContent }}">
   @livewire($currentContent, key($currentContent))
</div>

I have a Livewire component which is grabbing the data for me, paginating it and supposedly passing it to the rendered component.

<?php

namespace App\Livewire\Pro\Dashboard;

use Livewire\WithPagination;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Pagination\LengthAwarePaginator;

class Earnings extends Component
{

use WithPagination;

public $bookings;
public $stats;
public $pagination;
public $paginationLinks;
public $totalBookings;

public function mount() {

    $this->bookings = [];

}

public function render()
{

    $this->bookings = Auth::user()->cleaner->bookings()
    ->with([
        'cleanType:id,name',
        'availabilities' => function($query) {
            $query->limit(1); // Restrict to the first availability
        },
        'customer.user:id,first_name,surname'
    ])
    ->where('status', '!=', 'pending')
    ->orderBy('date', 'desc')
    ->paginate(5);

    return view('livewire.pro.dashboard.earnings', ['bookings' => $this->bookings]);

}

as you can see I've tried a few little hacks to get going, but still nothing. I'm now getting an error which is followed by a complete dump of my paginated object

Property type not supported in Livewire for property:

The blade file seems ok, and I can dd($bookings) to great effect, but can't get into the @foreach loop on the next line.

Any ideas?

• laravel
• laravel-livewire
• laravel-pagination

• I don't use livewire, but at a glance, you've got a type mismatch between $this->bookings = [] and $this->bookings = /* ... */->paginate(5);; one is an Array, the other is a LengthAwarePaginator. I suspect that has something to do with the error you've got in your comments to Developer Nilesh's answer. – Tim Lewis Commented Feb 4 at 17:17

1 Answer 1

I modify into the code, try to add the updated functionality from this:

Earnings.php:

 namespace App\Livewire\Pro\Dashboard;

use Livewire\WithPagination;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Pagination\LengthAwarePaginator;

class Earnings extends Component
{
    use WithPagination;

    public $bookings;
    public $perPage = 5;
    public $currentPage;

    public function mount()
    {
        $this->currentPage = request()->get('page', 1);
    }

    public function render()
    {
        // Get the query results
        $query = Auth::user()->cleaner->bookings()
            ->with([
                'cleanType:id,name',
                'availabilities' => function($query) {
                    $query->limit(1);
                },
                'customer.user:id,first_name,surname'
            ])
            ->where('status', '!=', 'pending')
            ->orderBy('date', 'desc');

        // Get total count
        $total = $query->count();

        // Get paginated results
        $results = $query->skip(($this->currentPage - 1) * $this->perPage)
                        ->take($this->perPage)
                        ->get();

        // Create LengthAwarePaginator instance
        $this->bookings = new LengthAwarePaginator(
            $results,
            $total,
            $this->perPage,
            $this->currentPage,
            [
                'path' => request()->url(),
                'query' => request()->query(),
            ]
        );

        return view('livewire.pro.dashboard.earnings', [
            'bookings' => $this->bookings
        ]);
    }

    // Handle page changes
    public function setPage($page)
    {
        $this->currentPage = $page;
    }
}

blade file:

    <div>
        @if($bookings->count())
            @foreach($bookings as $booking)
                {{-- Booking details here --}}
            @endforeach
    
            @if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled"><span>&laquo;</span></li>
            @else
                <li><a wire:click="setPage({{ $paginator->currentPage() - 1 }})">&laquo;</a></li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="active"><span>{{ $page }}</span></li>
                        @else
                            <li><a wire:click="setPage({{ $page }})">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li><a wire:click="setPage({{ $paginator->currentPage() + 1 }})">&raquo;</a></li>
            @else
                <li class="disabled"><span>&raquo;</span></li>
            @endif
        </ul>
    </nav>
@endif
            <div>
                {{ $bookings->links() }}
            </div>
        @else
            <p>No bookings found.</p>
        @endif
    </div>

Add @persist directive if needed for state preservation:

<div wire:key="{{ $currentContent }}">
    @persist('earnings')
        @livewire($currentContent, key($currentContent))
    @endpersist
</div>