[feature] optional pagination

web/html/xui/component/setting.html

@@ -15,7 +15,7 @@
                 <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input>
             </template>
             <template v-else-if="type === 'number'">
-                <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
+                <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" :step="step" style="width: 100%;"></a-input-number>
             </template>
             <template v-else-if="type === 'switch'">
                 <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch>
@@ -28,7 +28,7 @@
 {{define "component/setting"}}
 <script>
     Vue.component('setting-list-item', {
-        props: ["type", "title", "desc", "value", "min"],
+        props: ["type", "title", "desc", "value", "min", "step"],
         template: `{{template "component/settingListItem"}}`,
     });
 </script>

web/html/xui/inbounds.html

@@ -125,13 +125,12 @@
                         <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
                                  :loading="spinning" :scroll="{ x: 1200 }"
-                                 :pagination="false"
+                                 :pagination=pagination(searchedInbounds)
                                  :expand-icon-as-cell="false"
                                  :expand-row-by-click="false"
                                  :expand-icon-column-index="0"
                                  :row-class-name="dbInbound => (dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || (dbInbound.isSS && dbInbound.toInbound().isSSMultiUser) ? '' : 'hideExpandIcon')"
-                                 style="margin-top: 20px"
-                                 @change="() => getDBInbounds()">
+                                 style="margin-top: 20px">
                             <template slot="action" slot-scope="text, dbInbound">
                                 <a-dropdown :trigger="['click']">
                                     <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
@@ -260,7 +259,7 @@
                                     :row-key="client => client.id"
                                     :columns="innerColumns"
                                     :data-source="getInboundClients(record)"
-                                    :pagination="false"
+                                    :pagination=pagination(getInboundClients(record))
                                     style="margin-left: 20px;"
                                 >
                                     {{template "client_table"}}
@@ -270,7 +269,7 @@
                                     :row-key="client => client.id"
                                     :columns="innerTrojanColumns"
                                     :data-source="getInboundClients(record)"
-                                    :pagination="false"
+                                    :pagination=pagination(getInboundClients(record))
                                     style="margin-left: 20px;"
                                 >
                                     {{template "client_table"}}
@@ -291,6 +290,7 @@
         align: 'right',
         dataIndex: "id",
         width: 30,
+        responsive: ["xs"],
     }, {
         title: '{{ i18n "pages.inbounds.operate" }}',
         align: 'center',
@@ -381,6 +381,7 @@
             },
             tgBotEnable: false,
             showAlert: false,
+            pageSize: 0,
         },
         methods: {
             loading(spinning = true) {
@@ -416,6 +417,7 @@
                         domain: subDomain,
                         tls: subTLS
                     };
+                    this.pageSize = pageSize;
                 }
             },
             setInbounds(dbInbounds) {
@@ -971,6 +973,27 @@
                     this.spinning = false;
                 }
             },
+            pagination(obj){
+                if (this.pageSize > 0 && obj.length>this.pageSize) {
+                    // Set page options based on object size
+                    sizeOptions = []
+                    for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
+                        sizeOptions.push(i.toString());
+                    }
+                    // Add option to see all in one page
+                    sizeOptions.push(i.toString());
+                    
+                    p = {
+                        showSizeChanger: true,
+                        size: 'small',
+                        position: 'bottom',
+                        pageSize: this.pageSize,
+                        pageSizeOptions: sizeOptions
+                    }
+                    return p
+                }
+                return false
+            }
         },
         watch: {
             searchKey: debounce(function (newVal) {

web/html/xui/settings.html

@@ -82,6 +82,7 @@
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.privateKeyPath"}}' desc='{{ i18n "pages.settings.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.panelUrlPath"}}' desc='{{ i18n "pages.settings.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.settings.sessionMaxAge" }}' desc='{{ i18n "pages.settings.sessionMaxAgeDesc" }}'  v-model="allSetting.sessionMaxAge" :min="0"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.pageSize" }}' desc='{{ i18n "pages.settings.pageSizeDesc" }}'  v-model="allSetting.pageSize" :min="0" :step="5"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.settings.expireTimeDiff" }}' desc='{{ i18n "pages.settings.expireTimeDiffDesc" }}'  v-model="allSetting.expireDiff" :min="0"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.settings.trafficDiff" }}' desc='{{ i18n "pages.settings.trafficDiffDesc" }}'  v-model="allSetting.trafficDiff" :min="0"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.timeZone"}}' desc='{{ i18n "pages.settings.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>