How to Implement Pagination in ViewRecord Page with Custom View?

Hello, I'm trying to add pagination to a custom view in Filament. Here's my current setup:

1. File Location:
- Resource: app/Filament/Resources/TrabajoResource/Pages/ViewTrabajo.php
- Custom View: resources/views/filament/resources/trabajo/view.blade.php
2. Current Code:

class ViewTrabajo extends ViewRecord {
  protected static string $resource = TrabajoResource::class;
  public function getViewData(): array {
    $trabajo = $this->record;
    return ['trabajo' => $trabajo, 'evidencias' => $trabajo->evidencias()->paginate(6)];
  }
  public function getView(): string {
    return 'filament.resources.trabajo.view';
  }
}

class ViewTrabajo extends ViewRecord {
  protected static string $resource = TrabajoResource::class;
  public function getViewData(): array {
    $trabajo = $this->record;
    return ['trabajo' => $trabajo, 'evidencias' => $trabajo->evidencias()->paginate(6)];
  }
  public function getView(): string {
    return 'filament.resources.trabajo.view';
  }
}

3. View Implementation:

<x-filament::page>
  @if ($evidencias->isNotEmpty())
    @foreach ($evidencias as $evidencia)
      {{-- Content --}}
    @endforeach
    {{-- Pagination attempts --}}
  @else
    {{-- Empty state --}}
  @endif
</x-filament::page>

<x-filament::page>
  @if ($evidencias->isNotEmpty())
    @foreach ($evidencias as $evidencia)
      {{-- Content --}}
    @endforeach
    {{-- Pagination attempts --}}
  @else
    {{-- Empty state --}}
  @endif
</x-filament::page>

Issues I'm Facing:
1. First Attempt (Standard Pagination):
- Using

{{ $evidencias->links() }}

{{ $evidencias->links() }}

works functionally
- Issues:
- Design doesn't match Filament's style
- Full page refreshes cause scroll jumps
2. Second Attempt (Filament Pagination Component):
- Using

<x-filament::pagination :paginator="$evidencias" extreme-links />

<x-filament::pagination :paginator="$evidencias" extreme-links />

:
- Pros: Perfect design match with Filament
- Errors: Throws Livewire errors when clicking:

Livewire\Exceptions\MethodNotFoundException PHP 8.1.32 10.48.29
Unable to call component method. Public method [gotoPage] not found on component
Unable to call component method. Public method [previousPage] not found on component

Livewire\Exceptions\MethodNotFoundException PHP 8.1.32 10.48.29
Unable to call component method. Public method [gotoPage] not found on component
Unable to call component method. Public method [previousPage] not found on component

How can I implement pagination in a ViewRecord page that:
- Uses Filament's styled pagination component
- Properly handles page navigation without Livewire errors
- Maintains smooth UX without full page refreshes?
I've checked the Filament Pagination docs but they seem focused on component.
Thank you in advance for your help

Pagination Blade component - Core Concepts - Filament

Filament•8mo ago•

2 replies

demonshide

How to Implement Pagination in ViewRecord Page with Custom View?

class ViewTrabajo extends ViewRecord {
  protected static string $resource = TrabajoResource::class;
  public function getViewData(): array {
    $trabajo = $this->record;
    return ['trabajo' => $trabajo, 'evidencias' => $trabajo->evidencias()->paginate(6)];
  }
  public function getView(): string {
    return 'filament.resources.trabajo.view';
  }
}

class ViewTrabajo extends ViewRecord {
  protected static string $resource = TrabajoResource::class;
  public function getViewData(): array {
    $trabajo = $this->record;
    return ['trabajo' => $trabajo, 'evidencias' => $trabajo->evidencias()->paginate(6)];
  }
  public function getView(): string {
    return 'filament.resources.trabajo.view';
  }
}

3. View Implementation:

<x-filament::page>
  @if ($evidencias->isNotEmpty())
    @foreach ($evidencias as $evidencia)
      {{-- Content --}}
    @endforeach
    {{-- Pagination attempts --}}
  @else
    {{-- Empty state --}}
  @endif
</x-filament::page>

<x-filament::page>
  @if ($evidencias->isNotEmpty())
    @foreach ($evidencias as $evidencia)
      {{-- Content --}}
    @endforeach
    {{-- Pagination attempts --}}
  @else
    {{-- Empty state --}}
  @endif
</x-filament::page>

Issues I'm Facing:
1. First Attempt (Standard Pagination):
- Using

{{ $evidencias->links() }}

{{ $evidencias->links() }}

works functionally
- Issues:
- Design doesn't match Filament's style
- Full page refreshes cause scroll jumps
2. Second Attempt (Filament Pagination Component):
- Using

<x-filament::pagination :paginator="$evidencias" extreme-links />

<x-filament::pagination :paginator="$evidencias" extreme-links />

:
- Pros: Perfect design match with Filament
- Errors: Throws Livewire errors when clicking:

Livewire\Exceptions\MethodNotFoundException PHP 8.1.32 10.48.29
Unable to call component method. Public method [gotoPage] not found on component
Unable to call component method. Public method [previousPage] not found on component

Livewire\Exceptions\MethodNotFoundException PHP 8.1.32 10.48.29
Unable to call component method. Public method [gotoPage] not found on component
Unable to call component method. Public method [previousPage] not found on component

Pagination Blade component - Core Concepts - Filament

How to Implement Pagination in ViewRecord Page with Custom View?

How to Implement Pagination in ViewRecord Page with Custom View?

Similar Threads

Similar Threads

Similar Threads