diff --git a/web/components/common.js b/web/components/common.js
index 22b6e1b..29a0997 100644
--- a/web/components/common.js
+++ b/web/components/common.js
@@ -8,6 +8,22 @@ function crudCommonOptions() {
     }
 }
 
+function paginationCommonOptions(perPage = true) {
+    let option = {
+        type: 'pagination',
+        layout: [
+            'pager'
+        ],
+        maxButtons: 5,
+        showPageInput: false,
+        perPageAvailable: [10, 15, 20, 50, 100, 200],
+    }
+    if (perPage) {
+        option.layout.push('perPage')
+    }
+    return option
+}
+
 function timeAndFrom(field, fromNow, emptyText = '未停止', showSource = true) {
     let tpl = "${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('<span class=\"font-bold\">'," + fromNow + ",'</span>'))}"
     if (showSource) {
@@ -543,12 +559,7 @@ function simpleYarnDialog(cluster, title, filterField) {
                 perPage: 10,
                 headerToolbar: [
                     "reload",
-                    {
-                        type: 'pagination',
-                        layout: ['pager', 'perPage'],
-                        maxButtons: 5,
-                        showPageInput: false,
-                    }
+                    paginationCommonOptions(),
                 ],
                 footerToolbar: [],
                 columns: yarnCrudColumns(),
@@ -769,28 +780,14 @@ function tableMetaDialog() {
                                                 filter_type: 'active',
                                             },
                                         },
-                                        affixHeader: true,
-                                        syncLocation: false,
-                                        silentPolling: true,
-                                        stopAutoRefreshWhenModalIsOpen: true,
-                                        resizable: false,
-                                        perPage: 10,
+                                        ...crudCommonOptions(),
+                                        perPage: 15,
                                         headerToolbar: [
                                             "reload",
-                                            {
-                                                type: 'pagination',
-                                                layout: ['pager', 'perPage'],
-                                                maxButtons: 5,
-                                                showPageInput: false,
-                                            },
+                                            paginationCommonOptions(),
                                         ],
                                         footerToolbar: [
-                                            {
-                                                type: 'pagination',
-                                                layout: ['pager', 'perPage'],
-                                                maxButtons: 5,
-                                                showPageInput: false,
-                                            },
+                                            paginationCommonOptions(),
                                         ],
                                         columns: [
                                             {
diff --git a/web/components/queue-tab.js b/web/components/queue-tab.js
index dbfee1f..d9d287c 100644
--- a/web/components/queue-tab.js
+++ b/web/components/queue-tab.js
@@ -14,12 +14,7 @@ function queueCrud(name) {
                 type: "tpl",
                 tpl: "共 <span class='text-primary font-bold'>${total|default:0}</span> 个任务"
             },
-            {
-                type: 'pagination',
-                layout: ['pager'],
-                maxButtons: 5,
-                showPageInput: false,
-            }
+            paginationCommonOptions(false)
         ],
         footerToolbar: [],
         columns: [
diff --git a/web/components/table-tab.js b/web/components/table-tab.js
index 271a4b0..48077a0 100644
--- a/web/components/table-tab.js
+++ b/web/components/table-tab.js
@@ -69,20 +69,10 @@ function tableTab() {
                         headerToolbar: [
                             "reload",
                             'filter-toggler',
-                            {
-                                type: 'pagination',
-                                layout: ['pager', 'perPage'],
-                                maxButtons: 5,
-                                showPageInput: false,
-                            },
+                            paginationCommonOptions(),
                         ],
                         footerToolbar: [
-                            {
-                                type: 'pagination',
-                                layout: ['pager', 'perPage'],
-                                maxButtons: 5,
-                                showPageInput: false,
-                            },
+                            paginationCommonOptions(),
                         ],
                         columns: [
                             {
diff --git a/web/components/version-tab.js b/web/components/version-tab.js
index 2634949..407d959 100644
--- a/web/components/version-tab.js
+++ b/web/components/version-tab.js
@@ -82,20 +82,10 @@ function versionTab() {
                         type: "tpl",
                         tpl: "共 <span class='text-primary font-bold'>${total|default:0}</span> 个表，其中 <span class='text-success font-bold'>${scheduled|default:0}</span> 个表已跨天，<span class='text-danger font-bold'>${unScheduled|default:0}</span> 个表未跨天"
                     },
-                    {
-                        type: 'pagination',
-                        layout: ['pager', 'perPage'],
-                        maxButtons: 5,
-                        showPageInput: false,
-                    },
+                    paginationCommonOptions(),
                 ],
                 footerToolbar: [
-                    {
-                        type: 'pagination',
-                        layout: ['pager', 'perPage'],
-                        maxButtons: 5,
-                        showPageInput: false,
-                    },
+                    paginationCommonOptions(),
                 ],
                 columns: [
                     {
diff --git a/web/components/yarn-tab.js b/web/components/yarn-tab.js
index c594e78..31c39eb 100644
--- a/web/components/yarn-tab.js
+++ b/web/components/yarn-tab.js
@@ -87,20 +87,10 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
                                 type: "tpl",
                                 tpl: "共 <span class='text-primary font-bold'>${total|default:0}</span> 个任务，其中 <span class='text-success font-bold'>${running|default:0}</span> 个任务运行中，<span class='text-danger font-bold'>${unRunning|default:0}</span> 个任务处于非运行状态"
                             },
-                            {
-                                type: 'pagination',
-                                layout: ['pager', 'perPage'],
-                                maxButtons: 5,
-                                showPageInput: false,
-                            }
+                            paginationCommonOptions(),
                         ],
                         footerToolbar: [
-                            {
-                                type: 'pagination',
-                                layout: ['pager', 'perPage'],
-                                maxButtons: 5,
-                                showPageInput: false,
-                            }
+                            paginationCommonOptions(),
                         ],
                         columns: yarnCrudColumns(),
                     }