diff --git a/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
index 5176dcf92..768e9fff2 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -12,10 +13,7 @@ import type {
   ListData,
   ResponseData,
 } from "@/modules/13_salary/interface/index/EmployeeChart";
-import type {
-  NewPagination,
-  DataOption,
-} from "@/modules/13_salary/interface/index/Main";
+import type { DataOption } from "@/modules/13_salary/interface/index/Main";
 import type { PosType } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importCompopnents*/
@@ -27,8 +25,12 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
-
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  getData
+);
 /** ข้อมูล Table*/
+const keyword = ref<string>("");
 const rows = ref<ListData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -44,16 +46,16 @@ const columns = ref<QTableProps["columns"]>([
     name: "posType",
     align: "left",
     label: "กลุ่มงาน",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posName",
+    name: "position",
     align: "left",
     label: "ตำแหน่ง",
-    sortable: false,
+    sortable: true,
     field: "posName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -62,16 +64,16 @@ const columns = ref<QTableProps["columns"]>([
     name: "posLevel",
     align: "left",
     label: "ระดับชั้นงาน",
-    sortable: false,
+    sortable: true,
     field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "rateOldMin",
+    name: "salaryMin",
     align: "left",
     label: "อัตราค่าจ้าง ขั้นต่ำสุด",
-    sortable: false,
+    sortable: true,
     field: "rateOldMin",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -86,37 +88,37 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "rateMaxOld",
+    name: "salary",
     align: "left",
     label: "อัตราค่าจ้าง ขั้นสูงสุดเดิม",
-    sortable: false,
+    sortable: true,
     field: "rateMaxOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "groupRateHigh",
+    name: "group",
     align: "left",
     label: "อัตราค่าจ้างสูงกว่า ฯ กลุ่มบัญชีค่าจ่าง",
-    sortable: false,
+    sortable: true,
     field: "groupRateHigh",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "rateHighMax",
+    name: "salaryMax",
     align: "left",
     label: "อัตราค่าจ้างสูงกว่า ฯ ขั้นสูงใหม่",
-    sortable: false,
+    sortable: true,
     field: "rateHighMax",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "reson",
+    name: "details",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "reson",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -125,22 +127,15 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
   "no",
   "posType",
-  "posName",
+  "position",
   "posLevel",
-  "rateOldMin",
+  "salaryMin",
   "groupOld",
-  "rateMaxOld",
-  "groupRateHigh",
-  "rateHighMax",
-  "reson",
+  "salary",
+  "group",
+  "salaryMax",
+  "details",
 ]);
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const maxPage = ref<number>(1); //จำนวนหน้า
-const totalList = ref<number>(0); //จำนวนรายการ
 
 const modalForm = ref<boolean>(false); //Popup ข้อมูลหลักเกณฑ์
 const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
@@ -151,11 +146,6 @@ const posTypeOpMain = ref<DataOption[]>([]); //ข้อมูลกลุ่ม
 const posTypeOp = ref<DataOption[]>([]); //ตัวเลือกข้อมูลรายการกลุ่มงาน
 const posType = ref<string | null>(""); //กลุ่มงาน
 
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
 /** ดึงข้อมูลกลุ่มงาน*/
 async function getPosType() {
   await http
@@ -184,18 +174,19 @@ async function getPosType() {
 
 /** ดึงข้อมูลรายการหลักเกณฑ์ */
 async function getData() {
+  showLoader();
   await http
-    .get(
-      config.API.salaryFormula() +
-        `/?page=${formFilter.page}&pageSize=${
-          formFilter.pageSize
-        }&keyword=${formFilter.keyword.trim()}&posTypeId=${posType.value}`
-    )
+    .get(config.API.salaryFormula(), {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+        posTypeId: posType.value,
+      },
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      totalList.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data.map((item: ResponseData) => ({
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data.map((item: ResponseData) => ({
         id: item.id,
         posType: item.posType,
         posName: item.position,
@@ -210,6 +201,9 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -224,28 +218,6 @@ function editPopup(params: ListData, type: string) {
   dataRow.value = params;
 }
 
-/**
- * function fetch ข้อมูลรายการตามหน้า
- * @param val หน้า
- */
-async function updatePage(val: number) {
-  try {
-    showLoader();
-    formFilter.page = val;
-    await getData();
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
-}
-
-/** function อัปเดทแถวต่อหน้า*/
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
 /**
  * ลบรายการหลักเกณฑ์
  * @param id หลักเกณฑ์
@@ -256,11 +228,7 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.salaryFormula() + `/${id}`)
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await getData();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -288,25 +256,10 @@ function filterSelector(val: string, update: Function) {
 
 /** function fetch ข้อมูลรายการหน้าแรก */
 function filterFn() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
   getData();
 }
 
-/** callbackFunction ทำงานเมื่อมี่การอัปเดทแถว*/
-watch(
-  () => formFilter.pageSize,
-  async () => {
-    try {
-      showLoader();
-      await getData();
-    } catch (error) {
-      messageError($q, error);
-    } finally {
-      hideLoader();
-    }
-  }
-);
-
 /** Hook */
 onMounted(async () => {
   try {
@@ -372,9 +325,9 @@ onMounted(async () => {
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
-      @keydown.enter.pervrnt="filterFn"
+      @keydown.enter.prevent="filterFn"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -397,7 +350,7 @@ onMounted(async () => {
     />
   </q-toolbar>
 
-  <d-table
+  <p-table
     flat
     bordered
     dense
@@ -408,7 +361,7 @@ onMounted(async () => {
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSize"
+    @request="onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -462,17 +415,13 @@ onMounted(async () => {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * Number(pagination.rowsPerPage) +
-              props.rowIndex +
-              1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div
             v-else-if="
-              col.name == 'rateOldMin' ||
-              col.name == 'rateMaxOld' ||
-              col.name == 'rateHighMax'
+              col.name == 'salaryMin' ||
+              col.name == 'salary' ||
+              col.name == 'salaryMax'
             "
           >
             {{ col.value ? col.value.toLocaleString() : "-" }}
@@ -487,21 +436,7 @@ onMounted(async () => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ totalList.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="maxPage"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePage"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogFormCriteria
     v-model:modal="modalForm"
diff --git a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
index e248ea98d..f8ac58888 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { updateCurrentPage } from "@/utils/function";
+
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
 import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponents*/
@@ -31,14 +30,10 @@ const {
   hideLoader,
   success,
 } = useCounterMixin();
-
-const formFilter = reactive<FormFilter>({
-  page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
-  keyword: "", //keyword ค้นหา
-});
-const maxPage = ref<number>(1); //จำนวนหน้า
-const totalList = ref<number>(0); //จำนวนรายการ
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListChart
+);
 
 const modalDialogEmployeeChart = ref<boolean>(false); //popup ผังบัญชีค่าจ้างลูกจ้างประจำ
 const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
@@ -50,12 +45,13 @@ const isActive = ref<boolean>(false); //สถานะการใช้งา
 
 /** ข้อมูล Table*/
 const rows = ref<EmployeeSalary[]>([]); //รายการผังบัญชีค่าจ้างลูกจ้างประจำ
+const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
     label: "ชื่อผังบัญชีอัตราค่าจ้าง",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -64,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "group",
     align: "left",
     label: "กลุ่มของผังบัญชีอัตราค่าจ้าง",
-    sortable: false,
+    sortable: true,
     field: "group",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -73,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "startDate",
     align: "left",
     label: "วันที่มีผลบังคับใช้",
-    sortable: false,
+    sortable: true,
     field: "startDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -82,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "isActive",
     align: "left",
     label: "สถานะการใช้งาน",
-    sortable: false,
+    sortable: true,
     field: "isActive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -101,16 +97,16 @@ const visibleColumns = ref<string[]>([
 async function fetchListChart() {
   showLoader();
   await http
-    .get(
-      config.API.salaryEmployeeChart +
-        `?page=${formFilter.page}&pageSize=${
-          formFilter.pageSize
-        }&keyword=${formFilter.keyword.trim()}`
-    )
+    .get(config.API.salaryEmployeeChart, {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then((res) => {
-      rows.value = res.data.result.data;
-      totalList.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,11 +176,7 @@ function onClickDelete(id: string) {
     http
       .delete(config.API.salaryEmployeeChartByid(id))
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchListChart();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -205,37 +197,12 @@ function onClickAdd() {
   modalDialogEmployeeChart.value = true;
 }
 
-/**
- * functionn fetch ข้อมูลรายการหน้าแรก*
- */
+/** function fetch ข้อมูลรายการหน้าแรก*/
 function filterFn() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
   fetchListChart();
 }
 
-/**
- * function fetch ข้อมูลรายการตามหน้า
- * @param val หน้า
- */
-function updatePage(val: number) {
-  formFilter.page = val;
-  fetchListChart();
-}
-
-/** function อัปเดทแถวต่อหน้า*/
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    fetchListChart();
-  }
-);
-
 onMounted(() => {
   fetchListChart();
 });
@@ -257,7 +224,7 @@ onMounted(() => {
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
       @keydown.enter.prevent="filterFn"
     >
@@ -281,7 +248,7 @@ onMounted(() => {
       class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
     />
   </q-toolbar>
-  <d-table
+  <p-table
     flat
     bordered
     dense
@@ -290,7 +257,8 @@ onMounted(() => {
     row-key="name"
     :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSize"
+    v-model:pagination="pagination"
+    @request="onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -445,21 +413,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ totalList.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="maxPage"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePage"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <!-- อัปโหลดเอกสารอ้างอิง -->
   <DialogEmployeeUpload
diff --git a/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
index 881f1956f..7804d91fc 100644
--- a/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -22,6 +23,7 @@ const $q = useQuasar();
 const store = useSalaryListSDataStore();
 const { messageError, showLoader, hideLoader, dialogConfirm, success } =
   useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListPerson);
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -47,25 +49,25 @@ const columns = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     field: "fullName",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "เลขที่ตำแหน่ง",
-    sortable: false,
+    sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -79,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: false,
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -88,7 +90,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "posType",
     align: "left",
     label: "ประเภทตำเเหน่ง",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -97,7 +99,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "posLevel",
     align: "left",
     label: "ระดับตำเเหน่ง",
-    sortable: false,
+    sortable: true,
     field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -105,38 +107,46 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 /** ข้อมูุลค้นหา*/
 const formFilter = reactive<DataFilterPerson>({
-  page: 1,
-  pageSize: 10,
   keyword: "",
   rootId: "",
   year: 0,
   period: "",
 });
-const maxPage = ref<number>(1);
 
 /**
  * function close popup
  */
 function closeModal() {
   modal.value = false;
-  formFilter.page = 1;
   formFilter.keyword = "";
+  rows.value = [];
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    sortBy: "",
+    descending: false,
+  };
 }
 
 /**
  * function เรียกรายชื่อ คนเลื่อนเงินเดือน
  */
-function fetchListPerson() {
+async function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
   formFilter.period = store.roundMainCode;
   formFilter.year = store.roundYear;
-  http
-    .post(config.API.salaryListPerson, formFilter)
+
+  const body = {
+    ...params.value,
+    ...formFilter,
+  };
+  await http
+    .post(config.API.salaryListPerson, body)
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,32 +190,13 @@ function onClickAddPerson(data: DataPerson) {
   );
 }
 
-/**
- * function updatePage
- */
-async function updatePagePagination() {
-  fetchListPerson();
-}
-
-/**
- * function updatePageSize
- */
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function ค้นหาข้อมูลตาม keyword
- */
+/** function ค้นหาข้อมูล*/
 function searchData() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
   fetchListPerson();
 }
 
-/**
- * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup
- */
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
 watch(
   () => modal.value,
   () => {
@@ -214,17 +205,8 @@ watch(
     }
   }
 );
-
-/**
- * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize
- */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
 </script>
+
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="max-width: 100vw">
@@ -248,7 +230,7 @@ watch(
             </q-input>
           </div>
           <div class="col-12">
-            <d-table
+            <p-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -258,7 +240,8 @@ watch(
               :paging="true"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePageSizePagination"
+              v-model:pagination="pagination"
+              :onRequest="onRequest"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -288,13 +271,9 @@ watch(
                     :props="props"
                   >
                     <div v-if="col.name === 'no'">
-                      {{
-                        (formFilter.page - 1) * formFilter.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                     </div>
-                    <div v-else-if="col.name === 'fullName'">
+                    <div v-else-if="col.name === 'firstName'">
                       {{
                         `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
                       }}
@@ -305,35 +284,11 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="formFilter.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPage)"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  @update:model-value="updatePagePagination()"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
           </div>
         </div>
       </q-card-section>
       <q-separator />
-
-      <!-- <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          type="submit"
-          unelevated
-          dense
-          class="q-px-md items-center"
-          color="light-blue-10"
-          label="บันทึก"
-        />
-      </q-card-actions> -->
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/04_salaryLists/TabMain.vue b/src/modules/13_salary/components/04_salaryLists/TabMain.vue
index 9db593cd9..ac12d597f 100644
--- a/src/modules/13_salary/components/04_salaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TabMain.vue
@@ -5,10 +5,10 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { DataOption } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 import type {
   DataPeriodLatest,
   DataPeriod,
@@ -27,6 +27,10 @@ import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsSt
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => fetchDataPeriod(store.groupId, true)
+);
 
 /** props*/
 const props = defineProps({
@@ -44,6 +48,8 @@ const rows = ref<DataPeriod[]>([]);
 const modalDialogInfoCriteria = ref<boolean>(false); // ตัวแปรสำหรับแสดง Dialog แสดงหลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
 const isRetire = ref<boolean>(false); // ตัวแปรสำหรับแสดงเฉพาะผู้เกษียณอายุราชการ
 
+const keyword = ref<string>("");
+
 /** itemsTab กลุ่ม*/
 const itemsTabGroup = ref([
   {
@@ -210,15 +216,6 @@ const itemsCard = ref([
   },
 ]);
 
-/** ข้อมูลค้นหารายชื่อคนขึ้นเงินเดือน*/
-const formFilter = reactive<DataFilter>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  type: store.tabType,
-});
-const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
-
 /**
  * ฟังก์ชันเรียกข้อมูลโควต้า
  * @param id กลุ่ม
@@ -255,11 +252,11 @@ async function fetchDataQuota(id: string) {
  * ฟังก์ชันเรียกข้อมูลรายชื่อเลื่อนเงินเดือนข้าราชการฯ
  * @param id กลุ่ม
  */
-async function fetchDataPeriod(id: string) {
+async function fetchDataPeriod(id: string, force: boolean = false) {
+  force && showLoader();
   let formData = {
-    page: formFilter.page.toString(),
-    pageSize: formFilter.pageSize.toString(),
-    keyword: formFilter.keyword.trim(),
+    ...params.value,
+    keyword: keyword.value.trim(),
     type: store.tabType,
     isRetire:
       store.roundMainCode !== "OCT"
@@ -268,17 +265,20 @@ async function fetchDataPeriod(id: string) {
         ? "1"
         : "0",
   };
-  rows.value = [];
-
   await http
     .put(config.API.salaryListPeriodORG(id), formData)
     .then((res) => {
-      rows.value = res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
+      total.value = result.total;
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
+    })
+    .finally(() => {
+      force && hideLoader();
     });
 }
 
@@ -287,9 +287,9 @@ async function changeTabGroup() {
   showLoader();
   try {
     await Promise.all([
-      (formFilter.page = 1),
-      (formFilter.pageSize = 10),
-      (formFilter.keyword = ""),
+      (pagination.value.page = 1),
+      (pagination.value.rowsPerPage = 10),
+      (keyword.value = ""),
       (store.tabType = "PENDING"),
       props.periodLatest &&
         store.fetchPeriodLatest(props?.periodLatest, store.tabGroup),
@@ -309,9 +309,9 @@ async function changeTabType() {
   if (!store.groupId) return;
   showLoader();
   try {
-    formFilter.page = 1;
-    formFilter.pageSize = 10;
-    formFilter.keyword = "";
+    pagination.value.page = 1;
+    pagination.value.rowsPerPage = 10;
+    keyword.value = "";
     store.groupId && (await fetchDataPeriod(store.groupId));
   } catch (error) {
     messageError($q, error);
@@ -671,24 +671,26 @@ onMounted(async () => {
                 <TableTabType1
                   v-if="index === 0"
                   :rows="rows"
-                  v-model:maxPage="maxPage"
-                  v-model:formFilter="formFilter"
                   :fetchDataTable="fetchDataPeriodNew"
                   :total="total"
-                  :snap-shot="props?.snapShot"
                   :is-close="props.periodLatest?.group1IsClose ?? false"
                   :is-retire="isRetire"
+                  v-model:pagination="pagination"
+                  v-model:keyword="keyword"
+                  :onRequest="onRequest"
+                  :checkAndUpdatePage="checkAndUpdatePage"
                 />
                 <TableTabType2
                   v-else
                   :rows="rows"
-                  v-model:maxPage="maxPage"
-                  v-model:formFilter="formFilter"
                   :fetchDataTable="fetchDataPeriodNew"
                   :total="total"
                   :type="item.type"
-                  :snap-shot="props?.snapShot"
                   :is-close="props.periodLatest?.group1IsClose ?? false"
+                  v-model:pagination="pagination"
+                  v-model:keyword="keyword"
+                  :onRequest="onRequest"
+                  :checkAndUpdatePage="checkAndUpdatePage"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue b/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
index 2827baa1c..2de930508 100644
--- a/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, computed } from "vue";
 import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
 import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue";
@@ -28,10 +27,11 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const snapShot = defineModel<string>("snapShot");
 const isClose = defineModel<boolean>("isClose", { required: true });
+const pagination = defineModel<NewPagination>("pagination", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", { required: true });
 
 const props = defineProps({
   rows: { type: Array, required: true },
@@ -47,6 +47,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
+  checkAndUpdatePage: {
+    type: Function,
+    required: true,
+  },
 });
 
 /** ข้อมูล Table*/
@@ -62,20 +70,20 @@ const baseColumns = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "fullName",
-    sortable: false,
+    field: "firstName",
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "เลขที่ตำแหน่ง",
-    sortable: false,
-    field: "posNo",
+    sortable: true,
+    field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -88,7 +96,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: false,
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -97,7 +105,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -106,7 +114,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "posLevel",
     align: "left",
     label: "ระดับ",
-    sortable: false,
+    sortable: true,
     field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -115,7 +123,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "posExecutive",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: false,
+    sortable: true,
     field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -124,7 +132,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "amount",
     align: "left",
     label: "เงินเดือนฐาน",
-    sortable: false,
+    sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -133,7 +141,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "amountUse",
     align: "left",
     label: "จำนวนเงินที่ใช้เลื่อน",
-    sortable: false,
+    sortable: true,
     field: "amountUse",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -143,7 +151,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "positionSalaryAmount",
     align: "left",
     label: "เงินเดือนหลังเลื่อน",
-    sortable: false,
+    sortable: true,
     field: "positionSalaryAmount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -152,7 +160,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "isRetired",
     align: "center",
     label: "เกษียณอายุ",
-    sortable: false,
+    sortable: true,
     field: "isRetired",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -161,7 +169,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -169,8 +177,8 @@ const baseColumns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "posNo",
-  "fullName",
+  "orgShortName",
+  "firstName",
   "position",
   "posType",
   "posLevel",
@@ -271,48 +279,17 @@ function onClickDelete(id: string) {
   });
 }
 
-/**
- * function updatePageTable
- */
-function updatePagePagination() {
-  props.fetchDataTable?.();
-}
-
-/**
- * function updatePageSizeTable
- */
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function ค้นหาข้อมูล Table
- */
+/** ฟังก์ชันค้นหาข้อมูล Table*/
 function searchData() {
-  formFilter.value.page = 1;
+  pagination.value.page = 1;
   props.fetchDataTable?.();
 }
 
 /** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
 async function updateCurrentPageAndfetchData() {
-  formFilter.value.page = await updateCurrentPage(
-    formFilter.value.page,
-    Number(maxPage.value),
-    props.rows.length
-  );
+  await props.checkAndUpdatePage(props.rows.length);
   await props.fetchDataTable?.();
 }
-
-/**
- * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
- */
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
@@ -336,7 +313,7 @@ watch(
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
       @keydown.enter.prevent="searchData"
     >
@@ -367,7 +344,7 @@ watch(
     />
   </q-toolbar>
 
-  <d-table
+  <p-table
     ref="table"
     :columns="
       store.roundMainCode === 'OCT'
@@ -384,7 +361,8 @@ watch(
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -469,7 +447,6 @@ watch(
         >
           <div v-if="col.name === 'no'">
             {{
-              (formFilter.page - 1) * formFilter.pageSize +
               props.rowIndex +
               1 +
               (store.tabType == "FULL" && props.row.isReserve == true
@@ -477,10 +454,10 @@ watch(
                 : "")
             }}
           </div>
-          <div v-else-if="col.name === 'posNo'">
+          <div v-else-if="col.name === 'orgShortName'">
             {{ `${props.row.orgShortName} ${props.row.posMasterNo}` }}
           </div>
-          <div v-else-if="col.name === 'fullName'">
+          <div v-else-if="col.name === 'firstName'">
             {{
               `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
             }}
@@ -530,21 +507,7 @@ watch(
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePagePagination()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
diff --git a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
index 1e26f6744..b9c8dd646 100644
--- a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
 
 /** importType*/
 import type { QTableColumn } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
 import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue"; //เพิ่มคนเลื่อนเงินเดือน
@@ -38,20 +36,17 @@ const {
 } = useCounterMixin();
 
 /** Props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const snapShot = defineModel<string>("snapShot");
 const isClose = defineModel<boolean>("isClose", { required: true });
+const pagination = defineModel<NewPagination>("pagination", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", { required: true });
 const props = defineProps({
   rows: { type: Array, required: true },
   fetchDataTable: {
     type: Function,
     required: true,
   },
-  maxPage: {
-    type: Number,
-    required: true,
-  },
   total: {
     type: Number,
     required: true,
@@ -60,6 +55,14 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
+  checkAndUpdatePage: {
+    type: Function,
+    required: true,
+  },
 });
 
 /** ข้อมูล Table*/
@@ -75,11 +78,11 @@ const columns = ref<QTableColumn[]>([
   },
 
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
-    field: "fullName",
+    sortable: true,
+    field: "firstName",
     format(val, row) {
       return `${row.prefix}${row.firstName} ${row.lastName}`;
     },
@@ -87,11 +90,11 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "เลขที่ตำแหน่ง",
-    sortable: false,
-    field: "posNo",
+    sortable: true,
+    field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -104,7 +107,7 @@ const columns = ref<QTableColumn[]>([
     name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -113,7 +116,7 @@ const columns = ref<QTableColumn[]>([
     name: "posExecutive",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: false,
+    sortable: true,
     field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -123,7 +126,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "ตำแหน่งในสายงาน",
     field: "position",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -132,7 +135,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "ระดับ",
     field: "posLevel",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -141,7 +144,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "เงินเดือน",
     field: "amount",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -205,8 +208,8 @@ const columns = ref<QTableColumn[]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "fullName",
-  "posNo",
+  "firstName",
+  "orgShortName",
   "posType",
   "posExecutive",
   "position",
@@ -305,15 +308,9 @@ function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
-/** function updatePageSizeTable*/
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
 /** function ค้นหาข้อมูล Table */
 function searchData() {
-  formFilter.value.page = 1;
+  pagination.value.page = 1;
   props.fetchDataTable?.();
 }
 
@@ -337,22 +334,10 @@ function onClickMoveLevelMulti() {
 
 /** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
 async function updateCurrentPageAndfetchData() {
-  formFilter.value.page = await updateCurrentPage(
-    formFilter.value.page,
-    props.maxPage,
-    props.rows.length
-  );
+  await props.checkAndUpdatePage(props.rows.length);
   await props.fetchDataTable?.();
 }
 
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
-
 const infoType = ref<string>(""); //ประเภทข้อมูล
 /**
  * function ดูข้อมูลส่วนตัว
@@ -402,7 +387,7 @@ function onClickViewInfo(type: string, id: string) {
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
       @keydown.enter.prevent="searchData"
     >
@@ -426,7 +411,7 @@ function onClickViewInfo(type: string, id: string) {
       class="q-ml-sm"
     />
   </q-toolbar>
-  <d-table
+  <p-table
     ref="table"
     :columns="!checkPermission($route)?.attrIsGet ? columns?.filter((col:any) =>  col.name !== 'posSalary' && col.name !== 'discipline' && col.name !== 'leave' ) : columns"
     :rows="props.rows"
@@ -437,7 +422,8 @@ function onClickViewInfo(type: string, id: string) {
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -511,9 +497,7 @@ function onClickViewInfo(type: string, id: string) {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name == 'organization'" class="text-html">
             {{ findOrgNameHtml(props.row) }}
@@ -563,7 +547,7 @@ function onClickViewInfo(type: string, id: string) {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
+    <!-- <template v-slot:pagination="scope">
       ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
       <q-pagination
         v-model="formFilter.page"
@@ -576,8 +560,8 @@ function onClickViewInfo(type: string, id: string) {
         direction-links
         @update:model-value="updatePagePagination()"
       ></q-pagination>
-    </template>
-  </d-table>
+    </template> -->
+  </p-table>
 
   <!-- เพิ่มคนเลื่อนเงินเดือน -->
   <DialogAddPerson
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
index 6ad1b971f..e39563a7e 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
@@ -4,12 +4,12 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
 import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
 import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
@@ -22,6 +22,7 @@ const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
 const { messageError, showLoader, hideLoader, dialogConfirm, success } =
   useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListPerson);
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -47,26 +48,26 @@ const columns = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "fullName",
-    sortable: false,
+    field: "firstName",
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "ตำแหน่งเลขที่",
-    sortable: false,
-    field: "posNo",
+    sortable: true,
+    field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -79,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "position",
     align: "left",
     label: "ตำแหน่ง",
-    sortable: false,
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -88,17 +89,17 @@ const columns = ref<QTableProps["columns"]>([
     name: "posType",
     align: "left",
     label: "กลุ่มงาน",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posLevelName",
+    name: "posLevel",
     align: "left",
     label: "ระดับชั้นงาน",
-    sortable: false,
-    field: "posLevelName",
+    sortable: true,
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -110,19 +111,21 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 /** ข้อมูุลค้นหา*/
 const formFilter = reactive<DataFilterPerson>({
-  page: 1,
-  pageSize: 10,
   keyword: "",
   rootId: "",
   year: 0,
   period: "",
 });
-const maxPage = ref<number>(1);
 
 /** function close popup*/
 function closeModal() {
   modal.value = false;
-  formFilter.page = 1;
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  };
+
   formFilter.keyword = "";
 }
 
@@ -133,12 +136,17 @@ async function fetchListPerson() {
   formFilter.period = store.roundMainCode;
   formFilter.year = store.roundYear;
 
+  const body = {
+    ...params.value,
+    ...formFilter,
+  };
+
   await http
-    .post(config.API.salaryListPersonEmp, formFilter)
+    .post(config.API.salaryListPersonEmp, body)
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -186,20 +194,9 @@ function onClickAddPerson(data: DataPerson) {
   );
 }
 
-/** function update Pagination*/
-async function updatePagePagination() {
-  fetchListPerson();
-}
-
-/** function updatePageSize*/
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
 /** function ค้นหาข้อมูลตาม keyword*/
 function searchData() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
   fetchListPerson();
 }
 
@@ -212,14 +209,6 @@ watch(
     }
   }
 );
-
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -244,7 +233,7 @@ watch(
             </q-input>
           </div>
           <div class="col-12">
-            <d-table
+            <p-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -254,7 +243,8 @@ watch(
               :paging="true"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePageSizePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -284,13 +274,9 @@ watch(
                     :props="props"
                   >
                     <div v-if="col.name === 'no'">
-                      {{
-                        (formFilter.page - 1) * formFilter.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                     </div>
-                    <div v-else-if="col.name === 'fullName'">
+                    <div v-else-if="col.name === 'firstName'">
                       {{
                         `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
                       }}
@@ -301,20 +287,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="formFilter.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPage)"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  @update:model-value="updatePagePagination()"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
           </div>
         </div>
       </q-card-section>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
index e9107eb53..aad9c683f 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { DataOption } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
 import type {
   DataPeriodLatest,
   DataPeriod,
@@ -27,6 +28,10 @@ import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/Salar
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => fetchDataPeriod(store.groupId, true)
+);
 
 /** props*/
 const props = defineProps({
@@ -42,8 +47,8 @@ const splitterModel = ref<number>(13);
 const modalDialogInfoCriteria = ref<boolean>(false); //popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
 const isRetire = ref<boolean>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
 const rows = ref<DataPeriod[]>([]); //ข้อมูลรายชื่อ
+const keyword = ref<string>(""); //คำค้นหา
 const total = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(1); //จำนวนหน้า
 
 //itemsTab กลุ่ม
 const itemsTabGroup = ref([
@@ -203,13 +208,6 @@ const itemsCard = ref([
     total: 0,
   },
 ]);
-//ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน
-const formFilter = reactive<DataFilter>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  type: store.tabType,
-});
 
 /**
  * ฟังก์ชันเรียกข้อมูลโควต้า
@@ -246,11 +244,11 @@ async function fetchDataQuota(id: string) {
  * ฟังก์ชันเรียกข้อมูลรายชื่อ
  * @param id กลุ่ม
  */
-async function fetchDataPeriod(id: string) {
+async function fetchDataPeriod(id: string, force: boolean = false) {
+  force && showLoader();
   let formData = {
-    page: formFilter.page.toString(),
-    pageSize: formFilter.pageSize.toString(),
-    keyword: formFilter.keyword,
+    ...params.value,
+    keyword: keyword.value.trim(),
     type: store.tabType,
     isRetire:
       store.roundMainCode !== "OCT"
@@ -259,29 +257,32 @@ async function fetchDataPeriod(id: string) {
         ? "1"
         : "0",
   };
-  rows.value = [];
 
   await http
     .put(config.API.salaryListPeriodORGEmp(id), formData)
     .then((res) => {
-      rows.value = res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
+      total.value = result.total;
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
+    })
+    .finally(() => {
+      force && hideLoader();
     });
 }
 
 /** ฟังก์ชันเปลี่ยนขั้น*/
 async function changeTabType() {
   if (!store.groupId) return;
-
   showLoader();
   try {
-    formFilter.page = 1;
-    formFilter.pageSize = 10;
-    formFilter.keyword = "";
+    pagination.value.page = 1;
+    pagination.value.rowsPerPage = 10;
+    keyword.value = "";
     await fetchDataPeriod(store.groupId);
   } catch (error) {
     messageError($q, error);
@@ -531,25 +532,29 @@ onMounted(async () => {
               >
                 <TableTabType1
                   v-if="index === 0"
-                  v-model:max-page="maxPage"
-                  v-model:form-filter="formFilter"
                   :fetch-data-table="fetchDataPeriodNew"
                   :rows="rows"
                   :total="total"
                   :snap-shot="props?.snapShot"
                   :is-retire="isRetire"
                   :is-close="props.periodLatest?.group1IsClose ?? false"
+                  v-model:pagination="pagination"
+                  v-model:keyword="keyword"
+                  :onRequest="onRequest"
+                  :checkAndUpdatePage="checkAndUpdatePage"
                 />
                 <TableTabType2
                   v-else
                   :rows="rows"
-                  v-model:max-page="maxPage"
-                  v-model:form-filter="formFilter"
                   :fetch-data-table="fetchDataPeriodNew"
                   :total="total"
                   :type="item.type"
                   :snap-shot="props?.snapShot"
                   :is-close="props.periodLatest?.group1IsClose ?? false"
+                  v-model:pagination="pagination"
+                  v-model:keyword="keyword"
+                  :onRequest="onRequest"
+                  :checkAndUpdatePage="checkAndUpdatePage"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
index 9f12353e4..b2e24205c 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import config from "@/app.config";
@@ -12,7 +11,6 @@ import http from "@/plugins/http";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
 import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
@@ -27,10 +25,12 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
 const isClose = defineModel<boolean>("isClose", { required: true });
-const snapShot = defineModel<string>("snapShot");
+const pagination = defineModel<NewPagination>("pagination", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", { required: true });
+
 const props = defineProps({
   rows: { type: Array, required: true },
   fetchDataTable: {
@@ -45,6 +45,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
+  checkAndUpdatePage: {
+    type: Function,
+    required: true,
+  },
 });
 
 /** ข้อมูล Table*/
@@ -60,20 +68,20 @@ const baseColumns = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "fullName",
-    sortable: false,
+    field: "firstName",
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "ตำแหน่งเลขที่",
-    sortable: false,
-    field: "posNo",
+    sortable: true,
+    field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -81,7 +89,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "position",
     align: "left",
     label: "ตำแหน่ง",
-    sortable: false,
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -90,7 +98,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "posType",
     align: "left",
     label: "กลุ่มงาน",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -99,7 +107,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "posLevel",
     align: "left",
     label: "ระดับชั้นงาน",
-    sortable: false,
+    sortable: true,
     field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -108,7 +116,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "group",
     align: "left",
     label: "ผังค่าจ้าง(เดิม)",
-    sortable: false,
+    sortable: true,
     field: "group",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -120,7 +128,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "salaryLevel",
     align: "left",
     label: "ขั้น(เดิม)",
-    sortable: false,
+    sortable: true,
     field: "salaryLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -129,7 +137,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "amount",
     align: "left",
     label: "ค่าจ้างฐาน",
-    sortable: false,
+    sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -138,7 +146,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "amountUse",
     align: "left",
     label: "จำนวนเงินที่ใช้เลื่อน",
-    sortable: false,
+    sortable: true,
     field: "amountUse",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -148,7 +156,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "positionSalaryAmount",
     align: "left",
     label: "ค่าจ้างหลังเลื่อน",
-    sortable: false,
+    sortable: true,
     field: "positionSalaryAmount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -166,7 +174,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -174,8 +182,8 @@ const baseColumns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "posNo",
-  "fullName",
+  "firstName",
+  "orgShortName",
   "position",
   "posType",
   "posLevel",
@@ -208,9 +216,7 @@ const typeLevel = ref<string>(""); //เลื่อนขั้น
 const isReserve = ref<boolean>(false); //สำรอง
 const remark = ref<string>(""); //หมายเหตุ
 
-/**
- * function openPopup เพิ่มคนเลื่อนค่าจ้าง
- */
+/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -277,48 +283,17 @@ function onClickDelete(id: string) {
   });
 }
 
-/**
- * function updatePageTable
- */
-function updatePagePagination() {
-  props.fetchDataTable?.();
-}
-
-/**
- * function updatePageSizeTable
- */
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function ค้นหาข้อมูล Table
- */
+/**function ค้นหาข้อมูล Table*/
 function searchData() {
-  formFilter.value.page = 1;
+  pagination.value.page = 1;
   props.fetchDataTable?.();
 }
 
 /** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
 async function updateCurrentPageAndfetchData() {
-  formFilter.value.page = await updateCurrentPage(
-    formFilter.value.page,
-    Number(maxPage.value),
-    props.rows.length
-  );
+  await props.checkAndUpdatePage(props.rows.length);
   await props.fetchDataTable?.();
 }
-
-/**
- * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
- */
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
@@ -343,7 +318,7 @@ watch(
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
       @keydown.enter.prevent="searchData"
     >
@@ -374,7 +349,7 @@ watch(
     />
   </q-toolbar>
 
-  <d-table
+  <p-table
     ref="table"
     :columns="
       store.roundMainCode === 'OCT'
@@ -391,7 +366,8 @@ watch(
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -476,7 +452,6 @@ watch(
         >
           <div v-if="col.name === 'no'">
             {{
-              (formFilter.page - 1) * formFilter.pageSize +
               props.rowIndex +
               1 +
               (store.tabType == "FULL" && props.row.isReserve == true
@@ -484,10 +459,10 @@ watch(
                 : "")
             }}
           </div>
-          <div v-else-if="col.name === 'posNo'">
+          <div v-else-if="col.name === 'orgShortName'">
             {{ `${props.row.orgShortName} ${props.row.posMasterNo}` }}
           </div>
-          <div v-else-if="col.name === 'fullName'">
+          <div v-else-if="col.name === 'firstName'">
             {{
               `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
             }}
@@ -539,21 +514,7 @@ watch(
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePagePagination()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
index 5029d14dd..7ce838598 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import http from "@/plugins/http";
@@ -12,7 +12,6 @@ import config from "@/app.config";
 /** importType*/
 import type { QTableColumn } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
 import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
@@ -37,21 +36,18 @@ const {
 } = useCounterMixin();
 
 /** Props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
 const isClose = defineModel<boolean>("isClose", { required: true });
-const snapShot = defineModel<string>("snapShot");
-
+const pagination = defineModel<NewPagination>("pagination", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", { required: true });
 const props = defineProps({
   rows: { type: Array, required: true },
   fetchDataTable: {
     type: Function,
     required: true,
   },
-  maxPage: {
-    type: Number,
-    required: true,
-  },
+
   total: {
     type: Number,
     required: true,
@@ -60,6 +56,14 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
+  checkAndUpdatePage: {
+    type: Function,
+    required: true,
+  },
 });
 
 /** ข้อมูล Table*/
@@ -74,11 +78,11 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
-    field: "fullName",
+    sortable: true,
+    field: "firstName",
     format(val, row) {
       return `${row.prefix}${row.firstName} ${row.lastName}`;
     },
@@ -86,11 +90,11 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "posNo",
+    name: "orgShortName",
     align: "left",
     label: "ตำแหน่งเลขที่",
-    sortable: false,
-    field: "posNo",
+    sortable: true,
+    field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -105,7 +109,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "ตำแหน่ง",
     field: "position",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -113,7 +117,7 @@ const columns = ref<QTableColumn[]>([
     name: "posType",
     align: "left",
     label: "กลุ่มงาน",
-    sortable: false,
+    sortable: true,
     field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -123,7 +127,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "ระดับชั้นงาน",
     field: "posLevel",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -131,7 +135,7 @@ const columns = ref<QTableColumn[]>([
     name: "group",
     align: "left",
     label: "ผังค่าจ้าง(เดิม)",
-    sortable: false,
+    sortable: true,
     field: "group",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -143,7 +147,7 @@ const columns = ref<QTableColumn[]>([
     name: "salaryLevel",
     align: "left",
     label: "ขั้น(เดิม)",
-    sortable: false,
+    sortable: true,
     field: "salaryLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -153,7 +157,7 @@ const columns = ref<QTableColumn[]>([
     align: "left",
     label: "ค่าจ้าง",
     field: "amount",
-    sortable: false,
+    sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -217,8 +221,8 @@ const columns = ref<QTableColumn[]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "fullName",
-  "posNo",
+  "firstName",
+  "orgShortName",
   "posType",
   "position",
   "posLevel",
@@ -313,22 +317,9 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
   isReserve.value = isReserveVal;
 }
 
-/** function updatePageTable*/
-function updatePagePagination() {
-  props.fetchDataTable?.();
-}
-
-/**
- * function updatePageSizeTable
- */
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
 /** function ค้นหาข้อมูล Table*/
 function searchData() {
-  formFilter.value.page = 1;
+  pagination.value.page = 1;
   props.fetchDataTable?.();
 }
 
@@ -364,23 +355,9 @@ function onClickMoveLevelMulti() {
 
 /** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
 async function updateCurrentPageAndfetchData() {
-  formFilter.value.page = await updateCurrentPage(
-    formFilter.value.page,
-    props.maxPage,
-    props.rows.length
-  );
+  await props.checkAndUpdatePage(props.rows.length);
   await props.fetchDataTable?.();
 }
-
-/**
- * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
- */
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
 </script>
 
 <template>
@@ -418,7 +395,7 @@ watch(
       borderless
       dense
       outlined
-      v-model="formFilter.keyword"
+      v-model="keyword"
       placeholder="ค้นหา"
       @keydown.enter.prevent="searchData"
     >
@@ -444,7 +421,7 @@ watch(
       class="q-ml-sm"
     />
   </q-toolbar>
-  <d-table
+  <p-table
     ref="table"
     :columns="!checkPermission($route)?.attrIsGet 
     ? columns?.filter((col:any) =>  col.name !== 'posSalary' && col.name !== 'discipline' && col.name !== 'leave' ) 
@@ -455,9 +432,10 @@ watch(
     bordered
     :paging="true"
     dense
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1,10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -530,9 +508,7 @@ watch(
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name == 'organization'" class="text-html">
             {{ findOrgNameHtml(props.row) }}
@@ -589,21 +565,7 @@ watch(
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.total?.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePagePagination()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
diff --git a/src/modules/13_salary/interface/index/Main.ts b/src/modules/13_salary/interface/index/Main.ts
index 1339985d1..d9a2de8ca 100644
--- a/src/modules/13_salary/interface/index/Main.ts
+++ b/src/modules/13_salary/interface/index/Main.ts
@@ -13,10 +13,10 @@ interface DataOptionShort {
 }
 
 interface NewPagination {
-  descending: boolean;
+  descending?: boolean;
   page: number;
   rowsPerPage: number;
-  sortBy: string;
+  sortBy?: string;
 }
 
 interface ItemsMenu {
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
index 0d62b7224..2a2f52b80 100644
--- a/src/modules/13_salary/interface/index/SalaryList.ts
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -6,8 +6,6 @@ interface DataFilter {
 }
 
 interface DataFilterPerson {
-  page: number;
-  pageSize: number;
   keyword: string;
   rootId: string;
   year: number;
diff --git a/src/modules/13_salary/views/01_salaryMain.vue b/src/modules/13_salary/views/01_salaryMain.vue
index 9a03034d5..b9fc292ba 100644
--- a/src/modules/13_salary/views/01_salaryMain.vue
+++ b/src/modules/13_salary/views/01_salaryMain.vue
@@ -6,12 +6,12 @@ import { useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { updateCurrentPage } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType */
 import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { Salary } from "@/modules/13_salary/interface/response/Main";
 import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
 
@@ -30,6 +30,10 @@ const {
   hideLoader,
   success,
 } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListSalaly
+);
 
 /** modalDialog */
 const modalDialogFormMain = ref<boolean>(false); //popup เพิ่ม,แก้ไข ผังบัญชีเงินเดือน
@@ -38,22 +42,23 @@ const rowId = ref<string>(""); // id รายการผังบัญชี
 
 /** Table*/
 const rows = ref<Salary[]>([]); //รายการผังบัญชีเงินเดือน
+const keyword = ref<string>(""); //keyword ค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
     label: "ชื่อผังบัญชีอัตราเงินเดือน",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posList",
+    name: "posType",
     align: "left",
     label: "ประเภทผังบัญชีเงินเดือน",
-    sortable: false,
-    field: "posList",
+    sortable: true,
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -61,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "startDate",
     align: "left",
     label: "วันที่มีผลบังคับใช้",
-    sortable: false,
+    sortable: true,
     field: "startDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -70,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "isActive",
     align: "center",
     label: "สถานะการใช้งาน",
-    sortable: false,
+    sortable: true,
     field: "isActive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -78,19 +83,11 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "name",
-  "posList",
+  "posType",
   "startDate",
   "isActive",
 ]);
 
-/** queryString */
-const formQuery = reactive<FormQuerySalary>({
-  page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
-  keyword: "", //keyword ค้นหา
-});
-const maxPage = ref<number>(1); //จำนวนหน้า
-const total = ref<number>(); //จำนวนรายการ
 const isActive = ref<boolean>(false); //สถานะการใช้งาน
 const typeAction = ref<string>(""); //ประเภทการกระทำ
 const dataSalary = ref<Salary>(); //ข้อมูลรายการผังบัญชีเงินเดือนที่ต้องการแก้ไข
@@ -98,19 +95,17 @@ const dataSalary = ref<Salary>(); //ข้อมูลรายการผั
 /** ฟังก์ชันดึงข้อมูลรายการผังบัญชีเงินเดือน */
 async function fetchListSalaly() {
   showLoader();
-  const page = formQuery.page.toString();
-  const pageSize = formQuery.pageSize.toString();
-  const keyword = formQuery.keyword.toString().trim();
   await http
-    .get(
-      config.API.salaryChart +
-        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
-    )
+    .get(config.API.salaryChart, {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then(async (res) => {
-      const data = await res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -145,7 +140,7 @@ function onClickSalaryRate(id: string) {
  * ฟังก์ชันคัดลอกข้อมูลรายการผังบัญชีเงินเดือน
  * @param id บัญชีเงินเดือน
  */
-function onClickCoppy(id: string) {
+function onClickCopy(id: string) {
   showLoader();
   http
     .post(config.API.salaryChartCopy, { id: id })
@@ -171,12 +166,7 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.salaryChartByid(id))
       .then(async () => {
-        formQuery.page = await updateCurrentPage(
-          formQuery.page,
-          maxPage.value,
-          rows.value.length
-        );
-
+        await checkAndUpdatePage(rows.value.length);
         await fetchListSalaly();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -202,28 +192,12 @@ function onClickUpload(type: string, id: string, active: boolean) {
   isActive.value = active;
 }
 
-/**
- * ฟังก์ชัน updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชัน ค้นหาข้อมูลตาม keyword */
-function filterFn(page: number) {
-  page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
+function filterFn() {
+  pagination.value.page = 1;
+  fetchListSalaly();
 }
 
-/** callbackFunction ทำงานเมื่อมีการ เปลี่ยนแถว */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchListSalaly();
-  }
-);
-
 /** hooklifecycle*/
 onMounted(() => {
   fetchListSalaly();
@@ -255,9 +229,9 @@ onMounted(() => {
         borderless
         dense
         outlined
-        v-model="formQuery.keyword"
+        v-model="keyword"
         placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn(formQuery.page)"
+        @keydown.enter.prevent="filterFn()"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -281,7 +255,7 @@ onMounted(() => {
     </div>
 
     <div class="col-12 q-pt-sm">
-      <d-table
+      <p-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -291,8 +265,9 @@ onMounted(() => {
         :paging="true"
         dense
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -399,7 +374,7 @@ onMounted(() => {
                       v-if="checkPermission($route)?.attrIsCreate"
                       clickable
                       v-close-popup
-                      @click.stop="onClickCoppy(props.row.id)"
+                      @click.stop="onClickCopy(props.row.id)"
                     >
                       <q-item-section>
                         <div class="row items-center">
@@ -442,7 +417,7 @@ onMounted(() => {
                   size="24px"
                 />
               </div>
-              <div v-else-if="col.name === 'posList'" class="row">
+              <div v-else-if="col.name === 'posType'" class="row">
                 <div class="column text-weight-light">
                   <span>ประเภทตำแหน่ง</span>
                   <span>ระดับตำแหน่ง</span>
@@ -464,7 +439,7 @@ onMounted(() => {
                 }}
               </div>
               <div v-else-if="col.name === 'startDate'">
-                {{ col.value ? date2Thai(col.value) : "" }}
+                {{ col.value ? date2Thai(col.value) : "-" }}
               </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
@@ -472,21 +447,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total?.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="formQuery.page"
-            active-color="primary"
-            color="dark"
-            :max="maxPage"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchListSalaly()"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 
diff --git a/src/modules/13_salary/views/03_salaryRound.vue b/src/modules/13_salary/views/03_salaryRound.vue
index 00e7d8a8c..4decb6ded 100644
--- a/src/modules/13_salary/views/03_salaryRound.vue
+++ b/src/modules/13_salary/views/03_salaryRound.vue
@@ -7,6 +7,7 @@ import { updateCurrentPage } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -30,6 +31,10 @@ const {
   dialogConfirm,
   success,
 } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  getData
+);
 
 const idRound = ref<string>(""); //id รอบการขึ้นเงินเดือน
 
@@ -44,8 +49,6 @@ const yearData = ref<number | null>(0); //ปีงบประมาณ
 /** Table*/
 const year = ref<number>(0); //ปีงบประมาณ
 const filterKeyword = ref<string>(""); //คำค้นหา
-const maxPage = ref<number>(1); //จำนวนหน้า
-const totalList = ref<number>(0); //จำนวนรายการ
 const page = ref<number>(1); //หน้า
 const rowsPerPage = ref<number>(10); //จำนวนรายการต่อหน้า
 const columns = ref<QTableProps["columns"]>([
@@ -62,7 +65,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "period",
     align: "left",
     label: "รอบการขึ้นเงินเดือน",
-    sortable: false,
+    sortable: true,
     field: "period",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -71,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "year",
     align: "left",
     label: "ปีงบประมาณ",
-    sortable: false,
+    sortable: true,
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -80,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "effectiveDate",
     align: "left",
     label: "วันที่มีผลบังคับใช้",
-    sortable: false,
+    sortable: true,
     field: "effectiveDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -112,11 +115,6 @@ const visibleColumns = ref<string[]>([
   "isActive",
   "isClose",
 ]);
-const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
 
 /**ฟังก์ชัน เปิด Dialog เพิ่มรอบการขึ้นเงินเดือน */
 function clickAdd() {
@@ -128,15 +126,17 @@ function clickAdd() {
 async function getData() {
   showLoader();
   await http
-    .get(
-      config.API.salaryPeriod() +
-        `?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
-    )
+    .get(config.API.salaryPeriod(), {
+      params: {
+        ...params.value,
+        keyword: filterKeyword.value.trim(),
+        year: year.value,
+      },
+    })
     .then(async (res) => {
-      const data = await res.data.result;
-      dataStore.fetchDataMap(data.data);
-      maxPage.value = Math.ceil(data.total / rowsPerPage.value);
-      totalList.value = data.total;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchDataMap(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -168,12 +168,7 @@ function deleteData(id: string) {
     await http
       .delete(config.API.salaryPeriod() + `/${id}`)
       .then(async () => {
-        page.value = await updateCurrentPage(
-          page.value,
-          maxPage.value,
-          dataStore.rows.length
-        );
-
+        await checkAndUpdatePage(dataStore.rows.length);
         await getData();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -231,23 +226,6 @@ function dialogClose(id: string) {
   );
 }
 
-/**
- * ฟังก์ชันอัปเดท แถวต่อหน้า
- * @param newPagination
- */
-function updatePageSize(newPagination: NewPagination) {
-  page.value = 1;
-  rowsPerPage.value = newPagination.rowsPerPage;
-}
-
-/** ฟังก์ชันทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน */
-watch(
-  () => rowsPerPage.value,
-  () => {
-    getData();
-  }
-);
-
 /** Hooklifecycle */
 onMounted(async () => {
   year.value = calculateFiscalYear(new Date());
@@ -338,7 +316,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         ref="table"
         :columns="dataStore.columns"
         :rows="dataStore.rows"
@@ -351,21 +329,8 @@ onMounted(async () => {
         :visible-columns="dataStore.visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePageSize"
+        @request="onRequest"
       >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList?.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width />
@@ -478,11 +443,7 @@ onMounted(async () => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{
-                  (page - 1) * Number(pagination.rowsPerPage) +
-                  props.rowIndex +
-                  1
-                }}
+                {{ props.rowIndex + 1 }}
               </div>
               <div v-else-if="col.name == 'effectiveDate'">
                 {{ date2Thai(props.row.effectiveDate) }}
@@ -516,7 +477,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>