แก้ไข pagination ของหน้ารายการคำขอประเมิน

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -25,9 +25,9 @@ function Detailpage(id: string) {
 }
 
 const currentPage = ref<number>(1);
-const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
+const total = ref<number>(0);
 const filter = ref<string>("");
 const rowsPerPage = ref<number>(10);
 /**
@@ -39,6 +39,13 @@ const pagination = ref({
   rowsPerPage: rowsPerPage.value,
 });
 
+// Pagination - update rowsPerPage
+async function updatePagination(initialPagination: any) {
+  currentPage.value = 1;
+  rowsPerPage.value = initialPagination.rowsPerPage;
+  page.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
 watch(
   () => currentPage.value,
   () => {
@@ -69,8 +76,14 @@ function getList() {
         filter.value
       )
     )
-    .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+    .then(async (res) => {
+      total.value = res.data.result.total;
+      maxPage.value = await Math.ceil(total.value / rowsPerPage.value);
+      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
+      console.log(res.data.result.total);
+      console.log(rowsPerPage.value);
+      console.log(maxPage.value);
+
       const data = res.data.result.data;
       store.fetchData(data);
     })
@@ -142,19 +155,27 @@ onMounted(async () => {
         :paging="true"
         dense
         class="custom-header-table"
-        v-bind="attrs"
         :visible-columns="store.visibleColumns"
         v-model:pagination="pagination"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
-            >
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
             <q-th auto-width></q-th>
@@ -162,6 +183,14 @@ onMounted(async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ (page - 1) * rowsPerPage + props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
             <q-td auto-width>
               <q-icon
                 v-if="props.row.isDefault === true"