validate statcard dropdown Pagination รายชื่อผู้สอบผ่าน

src/modules/05_placement/components/pass/TableView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-space />
       <div class="items-center" style="display: flex">
         <div
@@ -115,9 +115,19 @@
       :virtual-scroll-sticky-size-start="48"
       dense
       :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="[0]"
+      v-model:pagination="pagination"
     >
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="pagination.page"
+          color="primary"
+          :max="scope.pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -136,12 +146,12 @@
 import { ref, useAttrs } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
 const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const modalPublish = ref<boolean>(false);
@@ -231,7 +241,16 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-
+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 refresh = () => props.refresh();
 const initialPagination = ref<any>({
   //   descending: false,
@@ -259,12 +278,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();