From ab6c7abcbb1895cd5c4f8f5d3912c791703846fa Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Oct 2024 17:04:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20paging=20?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/AddPersonal.vue        |  1 +
 .../Achievement/05_ResultsPerformance.vue     |  2 +-
 .../probation/FormAppoint/FormAppoint.vue     |  2 +-
 .../components/1_Complaint/MainPage.vue       | 54 +++++++----
 .../components/1_Complaint/TableComplaint.vue | 56 ++++--------
 .../components/2_InvestigateFacts/Form.vue    | 49 ++++++----
 .../2_InvestigateFacts/MainPage.vue           | 65 +++++++-------
 .../3_InvestigateDisciplinary/Form.vue        | 54 ++++++-----
 .../3_InvestigateDisciplinary/MainPage.vue    | 51 ++++++-----
 .../3_InvestigateDisciplinary/Table.vue       | 43 ++++-----
 .../components/4_Result/MainPage.vue          | 55 ++++++------
 .../components/4_Result/Table.vue             | 59 ++++--------
 .../6_BasicInformation/Director/Form.vue      |  3 +-
 .../6_BasicInformation/Director/MainPage.vue  | 70 ++++++++-------
 .../components/7_ListSuspend/ListsPage.vue    | 69 +++++++-------
 .../components/8_AppealComplain/MainPage.vue  | 89 +++++++++----------
 .../components/DialogDirector.vue             | 86 +++++++++---------
 17 files changed, 407 insertions(+), 401 deletions(-)

diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 40b14430d..5d5bcb889 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -122,6 +122,7 @@ const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
+    pagination.value.page = 1;
     await getSearch();
   }
 }
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 95e5ae085..a893a6f52 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -881,7 +881,7 @@ onMounted(async () => {
             :card-container-class="
               modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
             "
-            :rows-per-page-options="[1, 25, 50, 100]"
+            :rows-per-page-options="[10, 25, 50, 100]"
             @update:pagination="updatePaginationIdp"
           >
             <template v-slot:pagination="scope">
diff --git a/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
index 77c4cc67e..af6486c53 100644
--- a/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
+++ b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
@@ -625,7 +625,7 @@ onMounted(async () => {
                     : 'multiple'
                 "
                 v-model:selected="selected"
-                :rows-per-page-options="[1, 25, 50, 100]"
+                :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
               >
                 <template v-slot:pagination="scope">
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index d0d591645..7a145cbf0 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -26,18 +26,19 @@ const { fetchComplainst } = complainstStore;
 const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+
 const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<any[]>(complainstStore.statusOptions);
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await getList();
-}
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** ดึงข้อมูล เรื่องร้องเรียน */
 async function getList() {
@@ -45,15 +46,18 @@ async function getList() {
   await http
     .get(
       config.API.complaintList(
-        page.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         statusFilter.value
       )
     )
     //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       toptitle.value = res.data.result.total;
       const data = res.data.result.data;
       fetchComplainst(data);
@@ -74,7 +78,7 @@ function redirectToPageadd() {
 /** ล้างค่าใน input */
 function resetFilter() {
   filterKeyword.value = "";
-  page.value = 1
+  pagination.value.page = 1;
   if (filterRef.value) {
     filterRef.value.focus();
     getList();
@@ -95,6 +99,18 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -118,7 +134,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="option"
-          @update:model-value="getList()"
+          @update:model-value="getSearch()"
           use-input
           @filter="filterOptionFn"
         >
@@ -133,7 +149,7 @@ onMounted(async () => {
               @click.stop.prevent="
                 (option = complainstStore.statusOptions),
                   (statusFilter = 'ALL'),
-                  getList()
+                  getSearch()
               "
               class="cursor-pointer"
             />
@@ -165,7 +181,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="getList()"
+        @keydown.enter.prevent="getSearch()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -199,11 +215,11 @@ onMounted(async () => {
     <div class="col-12">
       <TableComplaint
         :filter-table="filterTable"
-        :rows-per-page="rowsPerPage"
-        :page="page"
-        :max-page="maxPage"
-        @update:pagination="updatePagingProp"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :toptitle="toptitle"
+        :get-list="getList"
       />
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index 6fce93858..ff67a7b59 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -6,29 +6,21 @@ import { useRouter } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
 
-const currentPage = ref<number>(1);
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const emit = defineEmits(["update:pagination"]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
+  getList: Function,
   filterTable: {
     type: String,
     default: "",
   },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  page: {
-    type: Number,
-    require: true,
-  },
   toptitle: {
     type: Number,
     require: true,
@@ -124,13 +116,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  descending: true,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
@@ -153,20 +138,10 @@ function onDetail(id: string) {
   router.push(`/discipline/complaints-detail/${id}`);
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
@@ -181,7 +156,6 @@ onMounted(() => {
     ref="table"
     :columns="columns"
     :rows="complainstStore.rows"
-    :filter="props.filterTable"
     row-key="subject"
     flat
     bordered
@@ -189,8 +163,8 @@ onMounted(() => {
     dense
     class="custom-header-table"
     :visible-columns="complainstStore.visibleColumns"
-    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -234,7 +208,7 @@ onMounted(() => {
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
             {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              (pagination.page - 1) * pagination.rowsPerPage +
               props.rowIndex +
               1
             }}
@@ -249,15 +223,17 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.toptitle }}รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.getList?.()"
       ></q-pagination>
     </template>
   </d-table>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index a8c20fcc2..116236471 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -61,13 +61,19 @@ const editDirectorId = ref<string>();
 const dutyVal = ref<string>();
 const commandNoVal = ref<string>();
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const filter = ref<string>("");
 const isUpdate = ref<boolean>(false);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
 
 const investigationExtendStatus = ref<boolean>(false);
 
@@ -359,28 +365,25 @@ async function getOc(activeId: string) {
     });
 }
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await getList();
-}
-
 /** ดึงข้อมูลรายละเอียดสืบสวน */
 async function getList() {
   showLoader();
   await http
     .get(
       config.API.directorList(
-        page.value,
-        rowsPerPage.value,
-        filterKeyword.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
+        filterKeyword2.value,
         mainStore.pathDirector(route.name as string)
       )
     )
     //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       investigateDis.fecthDirector(data);
     })
     .catch((e) => {
@@ -600,6 +603,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -1744,17 +1759,17 @@ onMounted(async () => {
 
   <DialogDirector
     :get-list="getList"
+    :get-search="getSearch"
     v-model:Modal="modal"
     :click-close="clickClose"
     :rows2="investigateDis.rows2"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
     :filter-table="filterTable"
-    :rows-per-page="rowsPerPage"
-    :page="page"
-    :max-page="maxPage"
+    v-model:pagination="pagination"
+    v-model:total="total"
+    v-model:total-list="totalList"
     :selected-row="rows"
-    @update:pagination="updatePagingProp"
     @returnDirector="returnDirector"
   />
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 5d4281931..13cce629d 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -20,19 +20,15 @@ const option = ref<any[]>(dataInvestigate.statusOptions);
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const statusFilter = ref<string>("NEW");
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
 const toptitle = ref<number>(0);
 
-/**
- *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,
 });
 
 const attrs = ref<any>(useAttrs());
@@ -52,14 +48,17 @@ async function getList() {
   await http
     .get(
       config.API.investigateMain(
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         statusFilter.value
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       toptitle.value = res.data.result.total;
 
       const data = res.data.result.data;
@@ -104,20 +103,20 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSerach() {
+  pagination.value.page = 1;
+  getList();
+}
 
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
+  async () => {
+    getSerach();
   }
 );
 
@@ -145,7 +144,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="option"
-          @update:model-value="getList()"
+          @update:model-value="getSerach()"
           use-input
           @filter="filterOptionFn"
         >
@@ -160,7 +159,7 @@ onMounted(async () => {
               @click.stop.prevent="
                 (option = dataInvestigate.statusOptions),
                   (statusFilter = 'ALL'),
-                  getList()
+                  getSerach()
               "
               class="cursor-pointer"
             />
@@ -178,7 +177,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="getList()"
+        @keydown.enter.prevent="getSerach()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -222,8 +221,8 @@ onMounted(async () => {
         class="custom-header-table"
         v-bind="attrs"
         :visible-columns="dataInvestigate.visibleColumns"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -271,7 +270,7 @@ onMounted(async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (currentPage - 1) * Number(pagination.rowsPerPage) +
+                  (pagination.page - 1) * pagination.rowsPerPage +
                   props.rowIndex +
                   1
                 }}
@@ -293,15 +292,17 @@ onMounted(async () => {
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
-          ทั้งหมด {{ toptitle }}รายการ
+          ทั้งหมด {{ 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>
       </d-table>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 294f041d5..9c4b8768b 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -61,9 +61,7 @@ const checkRoutePermisson = ref<boolean>(
 );
 const organizationOption = ref<DataOption[]>([]);
 /** query string*/
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
+
 const filterKeyword2 = ref<string>("");
 const listDirector = ref<any>([]);
 const modalEditDirector = ref<boolean>(false);
@@ -79,6 +77,15 @@ const modalPerson = ref<boolean>(false);
 /**  search data table*/
 const filter = ref<string>("");
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const extendStatus = ref<boolean>(false);
@@ -233,7 +240,7 @@ async function deleteDirector(id: string) {
 async function fetchDatadetail() {
   if (props.data) {
     if (countNum.value === 1) {
-      isReadonly.value = props.data.status != "NEW" ?? true;
+      isReadonly.value = props.data.status != "NEW" ? true : false;
       isSave.value = false;
       isSaveInfo.value = false;
       formData.respondentType = props.data.respondentType;
@@ -444,14 +451,18 @@ async function fetchDListDirector() {
   await http
     .get(
       config.API.directorList(
-        page.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword2.value,
         mainStore.pathDirector(route.name as string)
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      total.value = res.data.result.total;
+
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
       const data = res.data.result.data;
       let datalistDirector: responseType[] = data.map((e: directorType) => ({
         id: e.id,
@@ -480,15 +491,6 @@ async function fetchDListDirector() {
     });
 }
 
-/**
- * function อัดเดท Paging กรรมการ
- * @param rpp ต่อหน้า
- * @param p หน้า
- */
-async function updatePaging(rpp: number, p: number) {
-  page.value = p;
-  rowsPerPage.value = rpp;
-}
 
 /**
  * function return รายชื่อกรรมการที่เลือก
@@ -709,6 +711,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  fetchDListDirector();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 watch(
   () => formData.disciplinaryFaultLevel,
   () => {
@@ -1935,16 +1949,16 @@ onMounted(async () => {
 
   <DialogDirector
     v-model:Modal="modal"
+    :get-search="getSearch"
     :clickClose="clickClose"
     :rows2="listDirector"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
     :get-list="fetchDListDirector"
-    :rowsPerPage="rowsPerPage"
-    :page="page"
-    :maxPage="maxPage"
+    v-model:pagination="pagination"
+    v-model:total="total"
+    v-model:total-list="totalList"
     :selected-row="rows"
-    @update:pagination="updatePaging"
     @returnDirector="returnDirector"
   />
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 110e5d3e9..716cb61e0 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -10,17 +10,22 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
 const { fetchList } = dataInvestigateDis;
 
-const rowsPerPage = ref<number>(10);
 const filter = ref<string>(""); //search data table
-const page = ref<number>(1);
-const maxPage = ref<number>(1);
-const totalList = ref<number>();
 
 const status = ref<string>("NEW");
 async function fetchListDisciplinary() {
@@ -28,12 +33,14 @@ async function fetchListDisciplinary() {
   await http
     .get(
       config.API.disciplineDisciplinary() +
-        `?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       fetchList(data);
     })
     .catch((err) => {})
@@ -57,17 +64,23 @@ function openDetail(id: string) {
   router.push(`/discipline-detail/disciplinary/${id}`);
 }
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await fetchListDisciplinary();
-}
-
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
+  getSearch()
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   fetchListDisciplinary();
 }
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -89,19 +102,17 @@ onMounted(async () => {
         :visible-columns="dataInvestigateDis.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :pagination="rowsPerPage"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
-        :rowsPerPage="rowsPerPage"
-        :page="page"
-        :maxPage="maxPage"
-        :totalList="totalList"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :fetchListDisciplinary="fetchListDisciplinary"
-        @update:pagination="updatePagingProp"
         v-model:open-edit="openEdit"
         :open-detail="openDetail"
         :filterStatus="filterStatus"
+        :get-search="getSearch"
       >
       </Table>
     </div>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 47490f2f8..3defac776 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const dataInvestigateDis = useInvestigateDisStore();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -22,6 +26,7 @@ const props = defineProps({
   icon: String,
   inputvisible: Array,
   editvisible: Boolean,
+  getSearch: Function,
   validate: {
     type: Function,
     default: () => console.log("not function"),
@@ -79,13 +84,6 @@ const emit = defineEmits([
   "update:pagination",
 ]);
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  descending: true,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
 function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -116,7 +114,7 @@ function dataUpdate() {
 }
 
 function filterFn() {
-  props.fetchListDisciplinary?.();
+  props.getSearch?.();
 }
 
 /**
@@ -133,20 +131,10 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 </script>
 
 <template>
@@ -232,20 +220,21 @@ watch(
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
     dense
-    :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.totalList }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.fetchListDisciplinary?.()"
       ></q-pagination>
     </template>
     <template v-slot:header="props">
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index b618fae53..ae917ad4c 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -19,16 +19,16 @@ const store = useDisciplineResultStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const { fetchList } = store;
 
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
 const filter = ref<string>("");
 const status = ref<string>("DONE");
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
 async function fetchListResult() {
@@ -36,12 +36,14 @@ async function fetchListResult() {
   await http
     .get(
       config.API.listResult() +
-        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       await fetchList(data);
     })
     .catch((err) => {
@@ -52,13 +54,6 @@ async function fetchListResult() {
     });
 }
 
-async function updateQueryString(p: number, pS: number, key: string) {
-  page.value = pS === pageSize.value ? p : 1;
-  pageSize.value = pS;
-  filter.value = key;
-  await fetchListResult();
-}
-
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -76,9 +71,21 @@ function openDetail(id: string) {
 
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
+  getSearch();
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   fetchListResult();
 }
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -100,19 +107,17 @@ onMounted(async () => {
         :visible-columns="store.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="store.visibleColumns"
-        :pagination="initialPagination"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
-        :page="page"
         :fetchListResult="fetchListResult"
-        :pageSize="pageSize"
-        :maxPage="maxPage"
-        :totalList="totalList"
-        @update:queryString="updateQueryString"
+        :get-search="getSearch"
         v-model:open-edit="openEdit"
         v-model:open-detail="openDetail"
         :filterStatus="filterStatus"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
       >
       </Table>
     </div>
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 6e29aedca..75aa38408 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { checkPermission } from "@/utils/permissions";
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const store = useDisciplineResultStore();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -22,6 +26,7 @@ const props = defineProps({
   icon: String,
   inputvisible: Array,
   editvisible: Boolean,
+  getSearch: Function,
   validate: {
     type: Function,
     default: () => console.log("not function"),
@@ -50,28 +55,9 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
-  page: {
-    type: Number,
-  },
-  pageSize: {
-    type: Number,
-  },
-  maxPage: {
-    type: Number,
-  },
-  totalList: {
-    type: Number,
-  },
 });
 
-const currentPage = ref<number>(1);
 const filter = ref<string>("");
-const pagination = ref({
-  descending: false,
-  page: props.page,
-  rowsPerPage: props.pageSize,
-});
-
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -87,26 +73,13 @@ function resetFilter() {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");
   filterRef.value.focus();
-  props.fetchListResult?.();
-}
-
-function updateRowsPerPage(newPagination: any) {
-  pagination.value = newPagination;
-  currentPage.value = 1;
+  props.getSearch?.();
 }
 
 function updatePaging(p: number, pS: number, key: string) {
   emit("update:queryString", p, pS, key);
 }
 
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  emit(
-    "update:queryString",
-    currentPage.value,
-    Number(pagination.value.rowsPerPage),
-    filter.value
-  );
-});
 
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
@@ -116,7 +89,7 @@ function updateInput(value: string | number | null) {
   emit("update:inputfilter", value);
 }
 function filterFn() {
-  props.fetchListResult?.();
+  props.getSearch?.();
 }
 
 /**
@@ -132,6 +105,11 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 </script>
 
 <template>
@@ -217,8 +195,7 @@ function filterOptionFn(val: string, update: Function) {
     :virtual-scroll-sticky-size-start="48"
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
-    :pagination="pagination"
-    @update:pagination="updateRowsPerPage"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -260,7 +237,7 @@ function filterOptionFn(val: string, update: Function) {
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
             {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              (pagination.page - 1) * pagination.rowsPerPage +
               props.rowIndex +
               1
             }}
@@ -275,15 +252,17 @@ function filterOptionFn(val: string, update: Function) {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.totalList }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.fetchListResult?.()"
       ></q-pagination>
     </template>
   </d-table>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 5f178b3a5..9cb121eb7 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/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">
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index b50fcdedc..2b7e303c8 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/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="
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index 9bf1ddae5..deee12668 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -124,26 +124,19 @@ const columns = ref<QTableProps["columns"]>([
 
 const openModal = () => (modal.value = true);
 
-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);
-
-/**
- *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,
 });
 
 function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
-  getList();
+  getSearch();
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -170,15 +163,17 @@ async function getList() {
   await http
     .get(
       config.API.suspendMain(
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value
       )
     )
     .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = await res.data.result.data;
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       await dataStore.getData(data);
       hideLoader();
     })
@@ -190,23 +185,23 @@ async function getList() {
 }
 
 function filterFn() {
+  getSearch();
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
-  }
-);
-
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
+  async () => {
+    getSearch();
   }
 );
 
@@ -285,19 +280,21 @@ onMounted(async () => {
             :rows="dataStore.rows"
             row-key="id"
             :visible-columns="dataStore.visibleColumns"
-            v-model:pagination="pagination"
             :rows-per-page-options="[10, 25, 50, 100]"
+            @update:pagination="updatePagination"
           >
             <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">
@@ -341,9 +338,9 @@ onMounted(async () => {
                   </q-btn>
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name === 'no'">
+                  <div v-if="col.name == 'no'">
                     {{
-                      (currentPage - 1) * Number(pagination.rowsPerPage) +
+                      (pagination.page - 1) * pagination.rowsPerPage +
                       props.rowIndex +
                       1
                     }}
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index e40833407..cf711f483 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -31,21 +31,6 @@ const type = ref<DataOption[]>([
 
 const filterKeyword = ref<string>("");
 const dataRow = ref<RowList[]>([]);
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const totalList = ref<number>(0);
-
-const rowsPerPage = ref<number>(10);
-
-/**
- *pagination ของตาราง
- */
-const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
 
 const formData = reactive<any>({
   type: "ALL",
@@ -53,6 +38,15 @@ const formData = reactive<any>({
   year: new Date().getFullYear().toString(),
 });
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "no",
   "type",
@@ -184,23 +178,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getData();
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getData();
-  }
-);
-
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageDetail(id: string) {
   dataStore.rowsAdd = [];
@@ -220,7 +197,7 @@ function editPage(id: string) {
 
 /** ดึงข้อมูลเมื่อ กด enter */
 function filterFn() {
-  getData();
+  getSearch();
 }
 
 /** ปิด pop up */
@@ -237,14 +214,16 @@ async function getData() {
         formData.status,
         formData.type,
         formData.year,
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+       total.value = res.data.result.total;
       fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
@@ -257,19 +236,19 @@ async function getData() {
 
 /** update status */
 function dataUpdate() {
-  getData();
+  getSearch();
 }
 
 /** set ปี ทั้งหมด */
 function yearAll() {
   formData.year = 0;
-  getData();
+  getSearch();
 }
 
 /** ฟังชั่น เคลียฟิลเตอร์ */
 function resetFilter() {
   filterKeyword.value = "";
-  getData();
+  getSearch();
 }
 const option = ref<any[]>(dataStore.statusOptions);
 const optionType = ref<any[]>(type.value);
@@ -297,6 +276,24 @@ function filterOptionFnType(val: string, update: Function) {
   });
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getData();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   getData();
@@ -496,19 +493,21 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :visible-columns="dataStore.visibleColumns"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <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="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
@@ -558,7 +557,7 @@ onMounted(async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (currentPage - 1) * Number(pagination.rowsPerPage) +
+                  (pagination.page - 1) * pagination.rowsPerPage +
                   props.rowIndex +
                   1
                 }}
diff --git a/src/modules/11_discipline/components/DialogDirector.vue b/src/modules/11_discipline/components/DialogDirector.vue
index 599eb5f0f..42a2b3ff6 100644
--- a/src/modules/11_discipline/components/DialogDirector.vue
+++ b/src/modules/11_discipline/components/DialogDirector.vue
@@ -7,8 +7,13 @@ import type { directorType } from "@/modules/11_discipline/interface/index/Main"
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+const filterKeyword2 = defineModel<string>("filterKeyword2", {
+  required: true,
+});
 const selected = ref<directorType[]>([]);
-const currentPage = ref<number>(1);
 /** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
   "no",
@@ -84,9 +89,8 @@ const columns2 = ref<QTableProps["columns"]>([
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
-  getData: Function,
+  getSearch: Function,
   rows2: Array,
-  filterKeyword2: String,
   filterTable: {
     type: String,
     default: "",
@@ -113,13 +117,6 @@ const props = defineProps({
   },
 });
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  descending: true,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -127,7 +124,6 @@ const checkSelected = computed(() => {
 });
 
 const emit = defineEmits([
-  "update:filterKeyword2",
   "update:selected",
   "update:pagination",
   "returnDirector",
@@ -142,45 +138,29 @@ async function directorSave() {
  * ส่งค่า input กลับไปหน้าหลัก
  * @param value ค่าจาก input ฟิลเตอร์
  */
-function updateInput(value: any) {
-  emit("update:filterKeyword2", value);
+function updateInput() {
+  props.getSearch?.();
 }
 
 /**รีเซ็ตค่าในช่องค้นหา */
 function Reset() {
-  emit("update:filterKeyword2", "");
+  filterKeyword2.value = ''
+  props.getSearch?.();
 }
 
-/**
- * ส่งเลขหน้า กลับไปหน้าหลัก
- * @param newPagination จำนวนข้อมูลที่ต้องการแสดง
- * @param page เลขหน้าปัจจุบัน
- */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
 /** เช็คค่า props.Modal === true */
-watchEffect(() => {
-  if (props.Modal === true) {
-    selected.value = props.selectedRow;
-    props.getList();
-  }
-});
-
 watch(
-  () => currentPage.value,
+  () => props.Modal,
   () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
+    if (props.Modal === true) {
+      selected.value = props.selectedRow;
+      props.getList();
+    }
   }
 );
 </script>
@@ -197,8 +177,8 @@ watch(
           dense
           class="col-12 q-mb-sm"
           debounce="300"
-          :model-value="filterKeyword2"
-          @update:model-value="updateInput"
+          v-model="filterKeyword2"
+          @keydown.enter.prevent="updateInput"
           placeholder="ค้นหารายชื่อ"
           style="max-width: 100%"
         >
@@ -216,14 +196,28 @@ watch(
         <d-table
           :columns="columns2"
           :rows="rows2"
-          :filter="filterKeyword2"
           row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
           v-model:selected="selected"
           :rows-per-page-options="[10, 25, 50, 100]"
-          v-model:pagination="pagination"
+          @update:pagination="updatePagination"
         >
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total }} รายการ
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(totalList)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="props.getList?.()"
+            ></q-pagination>
+          </template>
+
           <template v-slot:header-selection="scope">
             <q-checkbox
               keep-color
@@ -244,7 +238,11 @@ watch(
               </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>
                   {{ col.value }}