Remove laravel pagination from contract table / ClientCase view and used replacing it with client pagination

resources/js/Components/DataTable/DataTableNew2.vue

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/vue-table";
 import { valueUpdater } from "@/lib/utils";
 import DataTableColumnHeader from "./DataTableColumnHeader.vue";
-import DataTablePagination from "./DataTablePagination.vue";
+import DataTablePaginationClient from "./DataTablePaginationClient.vue";
 import DataTableViewOptions from "./DataTableViewOptions.vue";
 import DataTableToolbar from "./DataTableToolbar.vue";
 import SkeletonTable from "../Skeleton/SkeletonTable.vue";
@@ -618,7 +618,14 @@ defineExpose({
 
       <!-- Client-side pagination -->
       <template v-else>
-        <DataTablePagination :table="table" />
+        <DataTablePaginationClient
+          :current-page="table.getState().pagination.pageIndex"
+          :last-page="table.getPageCount()"
+          :total="table.getFilteredRowModel().rows.length"
+          :showing-from="table.getFilteredSelectedRowModel().rows.length"
+          :showing-to="table.getFilteredRowModel().rows.length"
+          :table="table"
+        />
       </template>
     </div>
   </div>

resources/js/Components/DataTable/DataTablePaginationClient.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   showGoto: { type: Boolean, default: true },
   maxPageLinks: { type: Number, default: 5 },
   perPage: { type: Number, default: 10 },
+  table: { type: Object, required: true },
 });
 
 const emit = defineEmits(["update:page"]);
@@ -34,7 +35,7 @@ function goToPageInput() {
   const n = Number(raw);
   if (!Number.isFinite(n)) return;
   const target = Math.max(1, Math.min(props.lastPage, Math.floor(n)));
-  if (target !== props.currentPage) setPage(target);
+  if (target !== props.currentPage) props.table.setPageIndex(target - 1);
   gotoInput.value = "";
 }
 
@@ -136,14 +137,17 @@ function setPage(p) {
       >
         <PaginationContent>
           <!-- First -->
-          <PaginationFirst :disabled="currentPage <= 1" @click="setPage(1)">
+          <PaginationFirst
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          >
             <ChevronsLeft />
           </PaginationFirst>
 
           <!-- Previous -->
           <PaginationPrevious
-            :disabled="currentPage <= 1"
-            @click="setPage(currentPage - 1)"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
           >
             <ChevronLeft />
           </PaginationPrevious>
@@ -154,25 +158,22 @@ function setPage(p) {
             <PaginationItem
               v-else
               :value="item"
-              :is-active="currentPage === item"
-              @click="setPage(item)"
+              :is-active="currentPage === index"
+              @click="table.setPageIndex(index)"
             >
               {{ item }}
             </PaginationItem>
           </template>
 
           <!-- Next -->
-          <PaginationNext
-            :disabled="currentPage >= lastPage"
-            @click="setPage(currentPage + 1)"
-          >
+          <PaginationNext :disabled="!table.getCanNextPage()" @click="table.nextPage()">
             <ChevronRight />
           </PaginationNext>
 
           <!-- Last -->
           <PaginationLast
-            :disabled="currentPage >= lastPage"
-            @click="setPage(lastPage)"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
           >
             <ChevronsRight />
           </PaginationLast>
@@ -191,7 +192,7 @@ function setPage(p) {
             :max="lastPage"
             inputmode="numeric"
             class="w-10 h-full text-sm text-center bg-transparent border-0 outline-none focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-            :placeholder="String(currentPage)"
+            :placeholder="String(currentPage + 1)"
             aria-label="Pojdi na stran"
             @keyup.enter="goToPageInput"
             @blur="goToPageInput"