fixes #814,#809,#810,#809 + adding an infoFn for pagination

xaksis · Feb 27, 2021 · 8d90005 · 8d90005
1 parent b8e5c44
commit 8d90005
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 31 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -57,8 +57,10 @@ export default {
         mode: 'pages',
         enabled: true,
         perPage: 5,
-        perPageDropdown: [50, 100, 200, 300, 500, 1000],
-        perPageDropdownEnabled: false,
+        perPageDropdown: [3, 50, 100, 200, 300, 500, 1000],
+        perPageDropdownEnabled: true,
+        setCurrentPage: 2,
+        // infoFn: (params) => `alala ${params.firstRecordOnPage} to ${params.lastRecordOnPage} of ${params.totalRecords}`,
       },
       columns: [
         {

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -34,6 +34,7 @@
           :ofText="ofText"
           :pageText="pageText"
           :allText="allText"
+          :info-fn="paginationInfoFn"
         ></vgt-pagination>
       </slot>
       <vgt-global-search
@@ -331,6 +332,7 @@
           :ofText="ofText"
           :pageText="pageText"
           :allText="allText"
+          :info-fn="paginationInfoFn"
         ></vgt-pagination>
       </slot>
     </div>
@@ -343,9 +345,8 @@ import assign from 'lodash.assign';
 import cloneDeep from 'lodash.clonedeep';
 import filter from 'lodash.filter';
 import isEqual from 'lodash.isequal';
-import diacriticless from 'diacriticless';
 import defaultType from './types/default';
-import VgtPagination from './VgtPagination.vue';
+import VgtPagination from './pagination/VgtPagination.vue';
 import VgtGlobalSearch from './VgtGlobalSearch.vue';
 import VgtTableHeader from './VgtTableHeader.vue';
 import VgtHeaderRow from './VgtHeaderRow.vue';
@@ -416,12 +417,14 @@ export default {
       default() {
         return {
           enabled: false,
+          position: 'bottom',
           perPage: 10,
           perPageDropdown: null,
           perPageDropdownEnabled: true,
           position: 'bottom',
           dropdownAllowAll: true,
           mode: 'records', // or pages
+          infoFn: null,
         };
       },
     },
@@ -484,6 +487,7 @@ export default {
     customRowsPerPageDropdown: [],
     paginateDropdownAllowAll: true,
     paginationMode: 'records',
+    paginationInfoFn: null,
 
     currentPage: 1,
     currentPerPage: 10,
@@ -1062,13 +1066,13 @@ export default {
     },
 
     changePage(value) {
-      let { enabled, position } = this.paginationOptions
+      const enabled = this.paginate;
       let { paginationBottom, paginationTop } = this.$refs
       if (enabled) {
-        if ((position === 'top' || position === 'both') && paginationTop) {
+        if (this.paginateOnTop && paginationTop) {
           paginationTop.currentPage = value
         }
-        if ((position === 'bottom' || position === 'both') && paginationBottom) {
+        if (this.paginateOnBottom && paginationBottom) {
           paginationBottom.currentPage = value
         }
         // we also need to set the currentPage
@@ -1455,6 +1459,7 @@ export default {
         allLabel,
         setCurrentPage,
         mode,
+        infoFn,
       } = this.paginationOptions;
 
       if (typeof enabled === 'boolean') {
@@ -1521,6 +1526,10 @@ export default {
           this.changePage(setCurrentPage);
         }, 500);
       }
+
+      if (typeof infoFn === 'function') {
+        this.paginationInfoFn = infoFn;
+      }
     },
 
     initializeSearch() {

diff --git a/src/components/VgtPagination.vue → src/components/pagination/VgtPagination.vue b/src/components/VgtPagination.vue → src/components/pagination/VgtPagination.vue
@@ -13,7 +13,7 @@
           aria-controls="vgt-table">
           <option
             v-for="(option, idx) in rowsPerPageOptions"
-            :key="'rows-dropdown-option-' + idx"
+            :key="idx"
             :value="option">
             {{ option }}
           </option>
@@ -24,16 +24,15 @@
     <div class="footer__navigation vgt-pull-right">
       <pagination-page-info
         @page-changed="changePage"
-        :totalRecords="total"
-        :lastPage="pagesCount"
-        :currentPage="currentPage"
-        :ofText="ofText"
-        :pageText="pageText"
-        v-if="mode === 'pages'">
-      </pagination-page-info>
-      <div v-else class="footer__navigation__info">{{paginatedInfo}}</div>
+        :total-records="total"
+        :last-page="pagesCount"
+        :current-page="currentPage"
+        :current-per-page="currentPerPage"
+        :of-text="ofText"
+        :page-text="pageText"
+        :info-fn="infoFn"
+        :mode="mode" />
       <button
-        v-show="prevIsPossible"
         type="button"
         aria-controls="vgt-table"
         class="footer__navigation__page-btn"
@@ -44,7 +43,6 @@
       </button>
 
       <button
-        v-show="nextIsPossible"
         type="button"
         aria-controls="vgt-table"
         class="footer__navigation__page-btn"
@@ -82,6 +80,7 @@ export default {
     ofText: { default: 'of' },
     pageText: { default: 'page' },
     allText: { default: 'All' },
+    infoFn: { default: null },
   },
 
   data() {
@@ -94,6 +93,11 @@ export default {
     };
   },
   watch: {
+    currentPage: {
+      handler() {
+        console.log(this.currentPage);
+      },
+    },
     perPage: {
       handler(newValue, oldValue) {
         this.handlePerPage();
@@ -124,18 +128,6 @@ export default {
       return remainder === 0 ? quotient : quotient + 1;
     },
 
-    // Current displayed items
-    paginatedInfo() {
-      let first = ((this.currentPage - 1) * this.currentPerPage) + 1;
-      const last = Math.min(this.total, this.currentPage * this.currentPerPage);
-
-      if (last === 0) {
-        first = 0;
-      }
-
-      return `Showing ${first} to ${last} ${this.ofText} ${this.total} entries`;
-    },
-
     // Can go to next page
     nextIsPossible() {
       return this.currentPage < this.pagesCount;

diff --git a/src/components/VgtPaginationPageInfo.vue → ...ents/pagination/VgtPaginationPageInfo.vue b/src/components/VgtPaginationPageInfo.vue → ...ents/pagination/VgtPaginationPageInfo.vue
@@ -1,6 +1,9 @@
 <template>
 <div class="footer__navigation__page-info">
-  <form @submit.prevent>
+  <div v-if="infoFn">
+    {{infoFn(infoParams)}}
+  </div>
+  <form v-else-if="mode === 'pages'" @submit.prevent>
     <label :for="id" class="page-info__label">
       <span>{{pageText}}</span>
       <input
@@ -17,6 +20,9 @@
       Type a page number and press Enter to change the page.
     </span>
   </form>
+  <div v-else>
+    {{recordInfo}}
+  </div>
 </div>
 </template>
 
@@ -41,6 +47,18 @@ export default {
       default: 'page',
       type: String,
     },
+    currentPerPage: {},
+    mode: {
+      default: 'records',
+    },
+    infoFn: { default: null },
+  },
+  watch: {
+    currentPage: {
+      handler() {
+        console.log(this.currentPage);
+      },
+    },
   },
   data() {
     return {
@@ -51,6 +69,31 @@ export default {
     pageInfo() {
       return `${this.ofText} ${this.lastPage}`;
     },
+    firstRecordOnPage() {
+      return ((this.currentPage - 1) * this.currentPerPage) + 1;
+    },
+    lastRecordOnPage() {
+      return Math.min(this.totalRecords, this.currentPage * this.currentPerPage);
+    },
+    recordInfo() {
+      let first = this.firstRecordOnPage;
+      const last = this.lastRecordOnPage;
+
+      if (last === 0) {
+        first = 0;
+      }
+
+      return `${first} - ${last} ${this.ofText} ${this.totalRecords}`;
+    },
+    infoParams() {
+      return {
+        firstRecordOnPage: this.firstRecordOnPage,
+        lastRecordOnPage: this.lastRecordOnPage,
+        totalRecords: this.totalRecords,
+        currentPage: this.currentPage,
+        totalPages: this.lastPage,
+      };
+    },
   },
   methods: {
     getId() {

diff --git a/vp-docs/guide/configuration/pagination-options.md b/vp-docs/guide/configuration/pagination-options.md
@@ -20,6 +20,7 @@ A set of options that are related to table pagination. Each of these are optiona
     ofLabel: 'of',
     pageLabel: 'page', // for 'pages' mode
     allLabel: 'All',
+    infoFn: (params) => `my own page ${params.firstRecordOnPage}`, 
   }">
 </vue-good-table>
 ```
@@ -203,6 +204,31 @@ you can change one or more of the texts shown on pagination by overriding the la
 </vue-good-table>
 ```
 
+### InfoFn
+Provide your own function to lay out pagination info how you like:
+
+```html
+<vue-good-table
+  :columns="columns"
+  :rows="rows"
+  :pagination-options="{
+    enabled: true,
+    infoFn: (params) => `Showing ${params.firstRecordOnPage} to ${params.lastRecordOnPage} of page ${params.currentPage}`,
+  }">
+</vue-good-table>
+```
+
+the parameters passed to infoFn are the following: 
+```javascript
+{
+  firstRecordOnPage: 'index of the first record on the current page',
+  lastRecordOnPage: 'index of the last record on the current page',
+  totalRecords: 'total number of records',
+  currentPage: 'current page',
+  totalPage: 'total number of pages',
+}
+```
+
 ## Replace Pagination Component
 
 you can also replace the pagination component with your own component - [Custom Pagination](/guide/advanced/#custom-pagination)