update both sides of pagination widget during changes (#769)

xaksis · Jan 5, 2021 · 7e9a8fd · 7e9a8fd
1 parent 216be53
commit 7e9a8fd
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -1048,17 +1048,18 @@ export default {
     },
 
     changePage(value) {
-      if (this.paginationOptions.enabled) {
-        let paginationWidget = this.$refs.paginationBottom;
-        if (this.paginationOptions.position === 'top') {
-          paginationWidget = this.$refs.paginationTop;
+      let { enabled, position } = this.paginationOptions
+      let { paginationBottom, paginationTop } = this.$refs
+      if (enabled) {
+        if ((position === 'top' || position === 'both') && paginationTop) {
+          paginationTop.currentPage = value
         }
-        if (paginationWidget) {
-          paginationWidget.currentPage = value;
-          // we also need to set the currentPage
-          // for table.
-          this.currentPage = value;
+        if ((position === 'bottom' || position === 'both') && paginationBottom) {
+          paginationBottom.currentPage = value
         }
+        // we also need to set the currentPage
+        // for table.
+        this.currentPage = value;
       }
     },
 
@@ -1082,6 +1083,15 @@ export default {
 
     perPageChanged(pagination) {
       this.currentPerPage = pagination.currentPerPage;
+      // ensure that both sides of pagination are in agreement
+      // this fixes changes during position = 'both'
+      let paginationPosition = this.paginationOptions.position
+      if (this.$refs.paginationTop && (paginationPosition === 'top' || paginationPosition === 'both')) {
+        this.$refs.paginationTop.currentPerPage = this.currentPerPage
+      }
+      if (this.$refs.paginationBottom && (paginationPosition === 'bottom' || paginationPosition === 'both')) {
+        this.$refs.paginationBottom.currentPerPage = this.currentPerPage
+      }
       //* update perPage also
       const perPageChangedEvent = this.pageChangedEvent();
       this.$emit('on-per-page-change', perPageChangedEvent);