From c82f5cb2e958dbfee77ff7d979efa6cea3f37e55 Mon Sep 17 00:00:00 2001
From: Wietse van Ginkel <info@ginkelsoft.com>
Date: Fri, 28 Feb 2025 08:57:56 +0100
Subject: [PATCH] Pagination adjustment. To allow multiple Livewire components
 of the DataTable to be used simultaneously, the ?page= parameter has been
 removed from the URL.

---
 .../components/pagination.blade.php           | 20 ++++----
 src/Livewire/DataTableComponent.php           | 49 ++++++++++++++++++-
 2 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/resources/views/vendor/datatables/components/pagination.blade.php b/resources/views/vendor/datatables/components/pagination.blade.php
index 1962560..e991e1a 100644
--- a/resources/views/vendor/datatables/components/pagination.blade.php
+++ b/resources/views/vendor/datatables/components/pagination.blade.php
@@ -1,38 +1,36 @@
 <div class="mt-4 flex justify-between items-center">
-                <span class="text-sm text-gray-600">
-                    {{ __('datatable::datatables.page') }} {{ $rows->currentPage() }} van {{ $rows->lastPage() }} - {{ $rows->total() }} {{ __('datatable::datatables.results') }}
-                </span>
+    <span class="text-sm text-gray-600">
+        {{ __('datatable::datatables.page') }} {{ $currentPage }} {{ __('datatable::datatables.of') }} {{ $rows->lastPage() }} - {{ $rows->total() }} {{ __('datatable::datatables.results') }}
+    </span>
 
     <div class="flex gap-2">
         <button wire:click="previousPage"
-                class="px-4 py-2 rounded {{ $rows->onFirstPage() ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
-                {{ $rows->onFirstPage() ? 'disabled' : '' }}>
+                class="px-4 py-2 rounded {{ $currentPage === 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
+                {{ $currentPage === 1 ? 'disabled' : '' }}>
             {{ __('datatable::datatables.previous') }}
         </button>
 
         @if ($rows->lastPage() <= 10)
             @for ($page = 1; $page <= $rows->lastPage(); $page++)
                 <button wire:click="gotoPage({{ $page }})"
-                        class="px-4 py-2 rounded {{ $rows->currentPage() == $page ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}">
+                        class="px-4 py-2 rounded {{ $currentPage == $page ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}">
                     {{ $page }}
                 </button>
             @endfor
         @else
-
             <select wire:change="gotoPage($event.target.value)"
                     class="border border-gray-300 rounded px-3 py-1 text-sm w-16">
                 @for ($page = 1; $page <= $rows->lastPage(); $page++)
-                    <option value="{{ $page }}" {{ $rows->currentPage() == $page ? 'selected' : '' }}>
+                    <option value="{{ $page }}" {{ $currentPage == $page ? 'selected' : '' }}>
                         {{ $page }}
                     </option>
                 @endfor
             </select>
         @endif
 
-        {{-- Volgende knop --}}
         <button wire:click="nextPage"
-                class="px-4 py-2 rounded {{ $rows->hasMorePages() ? 'bg-gray-100 hover:bg-gray-200 text-gray-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed' }}"
-                {{ $rows->hasMorePages() ? '' : 'disabled' }}>
+                class="px-4 py-2 rounded {{ $currentPage === $rows->lastPage() ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200 text-gray-700' }}"
+                {{ $currentPage === $rows->lastPage() ? 'disabled' : '' }}>
             {{ __('datatable::datatables.next') }}
         </button>
     </div>
diff --git a/src/Livewire/DataTableComponent.php b/src/Livewire/DataTableComponent.php
index 6ba85ed..151cf02 100644
--- a/src/Livewire/DataTableComponent.php
+++ b/src/Livewire/DataTableComponent.php
@@ -66,6 +66,8 @@ class DataTableComponent extends Component
     /** @var bool Whether to show the select-all confirmation modal */
     public bool $showSelectAllModal = false;
 
+    public int $currentPage = 1;
+
     /** @var array Livewire event listeners */
     protected $listeners = ['refreshTable' => '$refresh'];
 
@@ -245,7 +247,52 @@ public function getRows(): LengthAwarePaginator
 
         $query->orderBy($this->sortColumn, $this->sortDirection);
 
-        return $query->paginate($this->perPage);
+
+        $total = $query->count();
+        $rows = $query->skip(($this->currentPage - 1) * $this->perPage)->take($this->perPage)->get();
+
+        return new \Illuminate\Pagination\LengthAwarePaginator(
+            $rows,
+            $total,
+            $this->perPage,
+            $this->currentPage
+        );
+    }
+
+    /**
+     * Navigate to a specific page without modifying the URL.
+     *
+     * @param int $page The page number to navigate to.
+     */
+    public function gotoPage(int $page): void
+    {
+        $this->setPage($page, $this->getPaginationName());
+    }
+
+    /**
+     * Navigate to the previous page.
+     */
+    public function previousPage(): void
+    {
+        $this->setPage($this->page - 1, $this->getPaginationName());
+    }
+
+    /**
+     * Navigate to the next page.
+     */
+    public function nextPage(): void
+    {
+        $this->setPage($this->page + 1, $this->getPaginationName());
+    }
+
+    /**
+     * Get a unique pagination name for this DataTable instance.
+     *
+     * @return string The unique pagination name.
+     */
+    protected function getPaginationName(): string
+    {
+        return md5($this->model . implode(',', $this->columns));
     }
 
     /**