fix pagination (#414)

apache · Sep 5, 2024 · ed0ec0a · ed0ec0a
1 parent 1945f23
commit ed0ec0a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
       :current-page="currentPage"
       :page-size="pageSize"
       :total="searchText ? pods.filter((d: any) => d.label.includes(searchText)).length : pods.length"
-      @current-change="changePage"
+      @current-change="handleCurrentChange"
       @prev-click="changePage"
       @next-click="changePage"
     />
@@ -214,16 +214,20 @@ limitations under the License. -->
     );
   }
 
-  function changePage(pageIndex: number) {
+  function changePage() {
     let podList = pods.value;
     if (searchText.value) {
       podList = pods.value.filter((d: { label: string }) => d.label.includes(searchText.value));
     }
     instances.value = podList.filter(
-      (_, index: number) => index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize,
+      (_, index: number) => index >= (currentPage.value - 1) * pageSize && index < currentPage.value * pageSize,
     );
     queryInstanceMetrics(instances.value);
-    currentPage.value = pageIndex;
+  }
+
+  function handleCurrentChange(val: number) {
+    currentPage.value = val;
+    changePage();
   }
 
   function searchList() {

diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
@@ -63,7 +63,7 @@ limitations under the License. -->
       :current-page="currentPage"
       :page-size="pageSize"
       :total="searchText ? sortServices.filter((d: any) => d.label.includes(searchText)).length : sortServices.length"
-      @current-change="changePage"
+      @current-change="handleCurrentChange"
       @prev-click="changePage"
       @next-click="changePage"
     />
@@ -249,19 +249,22 @@ limitations under the License. -->
     }
     return { rowspan: groups.value[param.row.group], colspan: 1 };
   }
-  function changePage(pageIndex: number) {
+  function changePage() {
     let services = sortServices.value;
     if (searchText.value) {
       services = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));
     }
     const arr = services.filter((d: Service, index: number) => {
-      if (index >= (pageIndex - 1) * pageSize && index < pageSize * pageIndex) {
+      if (index >= (currentPage.value - 1) * pageSize && index < pageSize * currentPage.value) {
         return d;
       }
     });
 
     setServices(arr);
-    currentPage.value = pageIndex;
+  }
+  function handleCurrentChange(val: number) {
+    currentPage.value = val;
+    changePage();
   }
   function searchList() {
     const searchServices = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));