แก้ paging วินัย

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -183,6 +183,7 @@ function updateSelect() {
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
+    pagination.value.page = 1;
     await getSearch();
   }
 }
@@ -348,7 +349,7 @@ watch(
                 dense
                 class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
-                :rows-per-page-options="[1, 25, 50, 100]"
+                :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
               >
                 <template v-slot:pagination="scope">

src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue

@@ -24,11 +24,6 @@ const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
 const titleInvestigate = ref<string>("");
 const personalId = ref<string>("");
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const totalList = ref<number>(0);
 
 const modalDetail = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
@@ -41,13 +36,13 @@ const dataPopUp = ref<DirectorRowsResponse>();
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 
-/**
- *pagination ของตาราง
- */
+const total = ref<number>(0);
+const totalList = ref<number>(1);
 const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 async function getList() {
@@ -55,16 +50,18 @@ async function getList() {
   await http
     .get(
       config.API.directorList(
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         mainStore.pathDirector(route.name as string)
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
       const data = res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       dataStore.fetchData(data);
     })
     .catch((e) => {
@@ -106,12 +103,12 @@ function resetFilter() {
   filterKeyword.value = "";
   if (filterRef.value) {
     filterRef.value.focus();
-    getList();
+    getSearch();
   }
 }
 
 function filterFn() {
-  getList();
+  getSearch();
 }
 
 function openDetail(data: DirectorRowsResponse, typeChange: string) {
@@ -135,20 +132,20 @@ function onEdit(id: string, check: boolean) {
   isEdit.value = check;
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
 
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
+  async () => {
+    getSearch();
   }
 );
 
@@ -228,19 +225,22 @@ onMounted(() => {
         bordered
         :paging="true"
         dense
-        v-model:pagination="pagination"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
         :visible-columns="dataStore.visibleColumns"
       >
         <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
+          ทั้งหมด {{ total }} รายการ
           <q-pagination
-            v-model="currentPage"
+            v-model="pagination.page"
             active-color="primary"
             color="dark"
-            :max="Number(maxPage)"
+            :max="Number(totalList)"
             size="sm"
             boundary-links
             direction-links
+            :max-pages="5"
+            @update:model-value="getList"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
@@ -293,7 +293,11 @@ onMounted(() => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+                  (pagination.page - 1) * pagination.rowsPerPage +
+                  props.rowIndex +
+                  1
+                }}
               </div>
               <div
                 v-else-if="