เพิ่ม paging

src/modules/09_scholarship/views/main.vue

@@ -80,7 +80,10 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 /** ดึงข้อมูล */
 function getData() {
   http
-    .get(config.API.developmentScholarship + `/user/${profilId.value}?year=${year.value}&type=${type.value}`)
+    .get(
+      config.API.developmentScholarship +
+        `/user/${profilId.value}?year=${year.value}&type=${type.value}`
+    )
     .then((res) => {
       rows.value = res.data.result;
     })
@@ -256,60 +259,67 @@ onMounted(async () => {
             </div>
           </q-toolbar>
 
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            hide-pagination
-            class="custom-table2"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
-          >
-            <template v-slot:pagination="scope">
-              <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 v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  @click="onEdit(props.row.id)"
-                >
-                  <div v-if="col.name == 'scholarshipYear'">
-                    {{ col.value ? col.value + 543 : "-" }}
-                  </div>
-                  <div v-else-if="col.name == 'scholarshipType'">
-                    {{ col.value ? convertType(col.value) : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
+          <div>
+            <q-table
+              flat
+              bordered
+              dense
+              row-key="id"
+              class="custom-table2"
+              style="max-height: 80vh"
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ rows.length }} รายการ
+                <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>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    style="color: #000000; font-weight: 500"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </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"
+                    @click="onEdit(props.row.id)"
+                  >
+                    <div v-if="col.name == 'scholarshipYear'">
+                      {{ col.value ? col.value + 543 : "-" }}
+                    </div>
+                    <div v-else-if="col.name == 'scholarshipType'">
+                      {{ col.value ? convertType(col.value) : "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
         </q-card>
       </div>
     </div>