VETO87's avatar

Pagination Links Not Displaying Correctly When Using Livewire Component

I'm facing an issue with pagination links not displaying correctly when I include a Livewire component within a loop to display orders. The pagination appear with pages numbers but it's not wokring

this is my code

    <div class="accordion">
      @foreach ($orders as $order)
        <div id="ID_{{ $order->id }}">
                <livewire:orders.table :order="$order->id"/>
     	</div>
      @endforeach
    </div>
     {{ $orders->links() }}
0 likes
3 replies
vincent15000's avatar
vincent15000
2 years ago
Best Answer
Level 63

I have the same problem.

I posted it as a bug on github.

It displays correctly if I have my own view for the pagination links and only if I give the path inside the links() function.

{{ $orders->links('path/to/the/pagination/view/pagination-view.blade.php') }}
2 likes
vincent15000's avatar

@VETO87 I have customized the content.

<div class="mt-4">
    @if ($paginator->hasPages())
        <nav class="flex justify-between">
            <button class="px-4 py-2 rounded bg-gray-100 @if ($paginator->onFirstPage()) text-gray-500 @else text-green-400 @endif" wire:click="previousPage('{{ $paginator->getPageName() }}')" @if ($paginator->onFirstPage()) disabled @endif dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before">
                <i class="fa-solid fa-angle-left fa-lg"></i>
            </button>

            <button class="px-4 py-2 rounded bg-gray-100 @if (! $paginator->hasMorePages()) text-gray-500 @else text-green-400 @endif" wire:click="nextPage('{{ $paginator->getPageName() }}')" @if (! $paginator->hasMorePages()) disabled @endif dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before">
                <i class="fa-solid fa-angle-right fa-lg"></i>
            </button>
        </nav>
    @endif
</div>

Please or to participate in this conversation.