From a5564cf99abb18776bc0e044a0a54c00ddda9281 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 9 Jun 2023 14:34:34 +0700
Subject: [PATCH] =?UTF-8?q?Pagination=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=E0=B9=83=E0=B8=99=20TableView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableView.vue | 44 +++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index e2959de9f..1c1c98c9a 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -226,10 +226,9 @@
       :virtual-scroll-sticky-size-start="48"
       dense
       :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+      v-model:pagination="pagination"
     >
-      <!-- :pagination="initialPagination" -->
+      <!-- :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" -->
       <!-- :rows-per-page-options="[0]" -->
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -245,6 +244,17 @@
           />
         </q-tr>
       </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="pagination.page"
+          color="grey-8"
+          :max="scope.pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
       <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
@@ -313,19 +323,37 @@
   </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
-
+const rows = ref<any>([]);
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const modalPublish = ref<boolean>(false);
 const modalDelete = ref<boolean>(false);
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -429,12 +457,6 @@ const updateVisibleFilter = (value: any) => {
   emit("update:inputvisibleFilter", value);
 };
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  else return start + "-" + end + " ใน " + total;
-};
-
 const checkSave = () => {
   props.validate();
   props.save();