เพิ่ม pagination ใน table UI สอบสวนความผิดทางวินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -67,8 +67,7 @@
     :virtual-scroll-sticky-size-start="48"
     dense
     :pagination-label="paginationLabel"
-    :pagination="initialPagination"
-    :rows-per-page-options="[0]"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -81,6 +80,18 @@
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </q-table>
 </template>
 <script setup lang="ts">
@@ -88,6 +99,17 @@ import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const initialPagination = ref<Pagination>({
@@ -134,10 +156,6 @@ const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
 const checkAdd = () => {
   props.add();
 };