diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 14082de02203e2268129147f11d1233b100b667d..cd7a8b188a83e0533f91eacde6a44994f1813277 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -18,12 +18,15 @@
   -->
 
 <script setup lang="ts">
-  import { ref, watch, computed, reactive, toRaw, toRefs } from 'vue'
+  import { ref, watch, computed, toRefs } from 'vue'
   import { useClusterStore } from '@/store/cluster'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { CopyOutlined } from '@ant-design/icons-vue'
   import { storeToRefs } from 'pinia'
-  import { message } from 'ant-design-vue'
+  import {
+    message,
+    TableColumnType,
+    TablePaginationConfig
+  } from 'ant-design-vue'
   import {
     JobVO,
     StageVO,
@@ -41,9 +44,9 @@
   import Task from './task.vue'
   import { copyText } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
-  const { t } = useI18n()
+  import useBaseTable from '@/hooks/useBaseTable'
 
-  const columns = [
+  const columns: TableColumnType[] = [
     {
       title: 'common.name',
       dataIndex: 'name',
@@ -66,6 +69,11 @@
     }
   ]
 
+  const { dataSource, loading, paginateProp, onChange, restState } =
+    useBaseTable<JobVO>(columns)
+
+  const { t } = useI18n()
+
   const clusterStore = useClusterStore()
   const { clusterId } = storeToRefs(clusterStore)
 
@@ -83,12 +91,10 @@
 
   const emits = defineEmits(['update:visible', 'closed'])
 
-  const loading = ref(false)
   const stages = ref<StageVO[]>([])
   const tasks = ref<TaskVO[]>([])
   const breadcrumbs = ref<any[]>([{ name: 'Job Info' }])
   const currTaskInfo = ref<TaskVO>()
-  const jobs = ref<JobVO[]>([])
   const intervalId = ref<Pausable | undefined>()
   const logTextOrigin = ref<string>('')
   const logsInfoRef = ref<HTMLElement | null>(null)
@@ -99,13 +105,6 @@
     'isTaskLogs'
   ])
 
-  const paginationProps = reactive<PaginationConfig>({})
-  const jobsPageState = reactive<Pagination>({
-    pageNum: 1,
-    pageSize: 10,
-    sort: 'desc'
-  })
-
   const getCurrPage = computed(() => {
     return currPage.value[breadcrumbs.value.length - 1]
   })
@@ -122,7 +121,7 @@
   watch(visible, (val) => {
     if (val) {
       loading.value = true
-      Object.assign(paginationProps, initPagedProps())
+      restState()
       if (outerData.value) {
         checkMetaOrigin(true)
       } else {
@@ -134,10 +133,10 @@
 
   watch(outerData, (val) => {
     if (!val) return
-    jobs.value = val.meta as any
+    dataSource.value = val.meta as any
   })
 
-  watch(jobs, (val) => {
+  watch(dataSource, (val) => {
     if (val) {
       const len = breadcrumbs.value.length
       const idxId = breadcrumbs.value[len - 1]?.id
@@ -150,7 +149,7 @@
   const checkMetaOrigin = (isOuter = false) => {
     if (isOuter) {
       const { meta, currItem } = outerData.value as OuterData
-      jobs.value = meta
+      dataSource.value = meta
       clickJob(meta[0])
       clickStage(currItem as StageVO)
       return
@@ -175,14 +174,16 @@
 
   const getJobsList = async () => {
     try {
-      const params = { ...toRaw(jobsPageState) }
+      loading.value = true
+      const { current, pageSize } = paginateProp.value
+      const params: Pagination = {
+        pageNum: current as number,
+        pageSize: pageSize as number,
+        sort: 'desc'
+      }
       const { content, total } = await getJobs(clusterId.value, params)
-      jobs.value = content.map((v) => {
-        return {
-          ...v
-        }
-      })
-      paginationProps.total = total
+      dataSource.value = content
+      paginateProp.value.total = total
       loading.value = false
     } catch (error) {
       loading.value = false
@@ -190,8 +191,8 @@
   }
 
   const getLogsInfo = (id: number) => {
-    getLogs(clusterId.value, id, ({ event }: AxiosProgressEvent) => {
-      logTextOrigin.value = event.target.responseText
+    getLogs(clusterId.value, id, ({ event: e }: AxiosProgressEvent) => {
+      logTextOrigin.value = e.target.responseText
       logsInfoRef.value = document.querySelector('.logsInfoRef')
       if (!logsInfoRef.value) {
         return
@@ -220,12 +221,6 @@
       })
   }
 
-  const clickTask = (record: TaskVO) => {
-    breadcrumbs.value.push(record)
-    currTaskInfo.value = record
-    getLogsInfo(record.id)
-  }
-
   const clickJob = (record: JobVO) => {
     stages.value = record.stages
     breadcrumbs.value.push(record)
@@ -236,47 +231,27 @@
     breadcrumbs.value.push(record)
   }
 
+  const clickTask = (record: TaskVO) => {
+    currTaskInfo.value = record
+    getLogsInfo(record.id)
+    breadcrumbs.value.push(record)
+  }
+
   const clickBreadCrumbs = (idx: number) => {
     const len = breadcrumbs.value.length
     breadcrumbs.value.splice(idx + 1, len)
   }
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-    jobsPageState.pageNum = page
+  const handleTableChange = (pagination: TablePaginationConfig) => {
     loading.value = true
+    onChange(pagination)
     getJobsList()
   }
 
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-    jobsPageState.pageSize = size
-    loading.value = true
-    getJobsList()
-  }
-
-  const initPagedProps = () => {
-    return {
-      current: 1,
-      pageSize: 10,
-      size: 'small',
-      showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50'],
-      total: 0,
-      onChange: handlePageChange,
-      onShowSizeChange: handlePageSizeChange
-    }
-  }
-
   const handleClose = () => {
     intervalId.value?.pause()
     breadcrumbs.value = [{ name: 'Job Info' }]
-    jobs.value = []
-    Object.assign(jobsPageState, {
-      pageNum: 1,
-      pageSize: 10,
-      sort: 'desc'
-    })
+    restState()
     emits('update:visible', false)
   }
 </script>
@@ -304,11 +279,12 @@
     <a-table
       v-show="getCurrPage == 'isJobTable'"
       :scroll="{ y: 500 }"
-      :pagination="paginationProps"
+      :pagination="paginateProp"
       :loading="loading"
-      :data-source="jobs"
+      :data-source="dataSource"
       :columns="columns"
       destroy-on-close
+      @change="handleTableChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/components/job-info/stage.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
index 9e74c63afc8bce3b4408c268b329dafd2418e940..848bf629c44a54ba56ebf83aac9fcdad0ac76fde 100644
--- a/bigtop-manager-ui/src/components/job-info/stage.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage.vue
@@ -19,29 +19,26 @@
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
-  import { ref, reactive, watch, computed } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { watch } from 'vue'
   import CustomProgress from './custom-progress.vue'
+  import useBaseTable from '@/hooks/useBaseTable'
+  import { TableColumnType } from 'ant-design-vue'
 
   interface StageProps {
     stages: StageVO[]
-    columns: any
+    columns: TableColumnType[]
   }
 
-  const props = withDefaults(defineProps<StageProps>(), {})
-  const loading = ref(false)
-  const pagedList = computed(() => {
-    return props.stages
-  })
+  const { columns, stages } = withDefaults(defineProps<StageProps>(), {})
+  const { dataSource, loading, paginateProp, onChange } = useBaseTable<StageVO>(
+    columns,
+    stages
+  )
 
   watch(
-    () => props.stages,
+    () => stages,
     (val) => {
-      if (val.length == 0) {
-        loading.value = true
-      } else {
-        loading.value = false
-      }
+      if (val) dataSource.value = val || []
     },
     {
       immediate: true,
@@ -49,25 +46,6 @@
     }
   )
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
-
   const emits = defineEmits(['clickStage'])
   const clickStage = (record: StageVO) => {
     emits('clickStage', record)
@@ -77,11 +55,12 @@
 <template>
   <div class="stage-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
+      :pagination="paginateProp"
+      :data-source="dataSource"
+      :columns="columns"
       :loading="loading"
       :scroll="{ y: 500 }"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/components/job-info/task.vue b/bigtop-manager-ui/src/components/job-info/task.vue
index c63cdcd4ecb6a17b74d7b1d2a3c2704d0c591956..169755ca51d1d07e62ac544305144796ee8ef494 100644
--- a/bigtop-manager-ui/src/components/job-info/task.vue
+++ b/bigtop-manager-ui/src/components/job-info/task.vue
@@ -18,8 +18,7 @@
   -->
 
 <script setup lang="ts">
-  import { computed, reactive, ref } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { watch } from 'vue'
   import { TaskVO, State } from '@/api/job/types.ts'
 
   import {
@@ -28,33 +27,29 @@
     CloseCircleTwoTone,
     LoadingOutlined
   } from '@ant-design/icons-vue'
+  import useBaseTable from '@/hooks/useBaseTable'
 
   interface TaskProps {
     tasks: TaskVO[]
     columns: any
   }
-  const props = withDefaults(defineProps<TaskProps>(), {})
 
-  const pagedList = ref(computed(() => props.tasks))
+  const { columns, tasks } = withDefaults(defineProps<TaskProps>(), {})
+  const { dataSource, paginateProp, onChange } = useBaseTable<TaskVO>(
+    columns,
+    tasks
+  )
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
+  watch(
+    () => tasks,
+    (val) => {
+      if (val) dataSource.value = val || []
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 
   const emits = defineEmits(['clickTask'])
   const clickTask = (record: TaskVO) => {
@@ -65,10 +60,11 @@
 <template>
   <div class="task-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
+      :pagination="paginateProp"
+      :data-source="dataSource"
+      :columns="columns"
       :scroll="{ y: 500 }"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3044882dbdf3777e1009d2be69bea8398ad41ee4
--- /dev/null
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -0,0 +1,76 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ref, onUnmounted } from 'vue'
+import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
+
+const useBaseTable = <T>(
+  columns: TableColumnType[],
+  rows?: T[],
+  pagination?: TablePaginationConfig | false | undefined
+) => {
+  const loading = ref(false)
+  const dataSource = ref<T[]>(rows || [])
+  const columnsProp = ref<TableColumnType[]>(columns)
+  const paginateProp = ref<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+    total: dataSource.value.length,
+    size: 'small',
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '30', '40', '50']
+  })
+
+  // merge pagination config
+  if (pagination) {
+    paginateProp.value = Object.assign(paginateProp.value, pagination)
+  }
+
+  const onChange = (pagination: TablePaginationConfig) => {
+    paginateProp.value = Object.assign(paginateProp.value, pagination)
+  }
+
+  const restState = () => {
+    loading.value = false
+    dataSource.value = []
+    paginateProp.value = {
+      current: 1,
+      pageSize: 10,
+      total: dataSource.value.length || 0,
+      size: 'small',
+      showSizeChanger: true,
+      pageSizeOptions: ['10', '20', '30', '40', '50']
+    }
+  }
+
+  onUnmounted(() => {
+    restState()
+  })
+
+  return {
+    columnsProp,
+    dataSource,
+    loading,
+    paginateProp,
+    onChange,
+    restState
+  }
+}
+
+export default useBaseTable