Merge pull request #54 from coderdiaz/improve-pagination

Improve pagination

Author: coderdiaz

src/App.vue

@@ -13,7 +13,7 @@ export default {
     return (
       <div id="app">
         <h2 class="text-center mb3">Vue Datasource</h2>
-        <datasource source={this.information} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
+        <datasource source={this.information} total={this.total} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
       </div>
     )
   },
@@ -95,13 +95,15 @@ export default {
       page: 1,
       perpage: 10,
       pagination: {},
-      search: ''
+      search: '',
+      total: 0
     }
   },
   methods: {
     getSource () {
       axios.get(`https://reqres.in/api/users?per_page=${this.perpage}&page=${this.page}`).then((response) => {
         this.information = response.data.data
+        this.total = response.data.total
       })
     },
     change (value) {

src/components/Pagination.vue

@@ -8,64 +8,83 @@ export default {
       <div class="vue-pagination">
         <nav>
           <ul class="pagination">
-            <li class={{disabled: this.pages.current_page === 1}}>
+            <li class={{disabled: this.currentPage === 1}}>
               <a href="#" on-click={(e) => this.firstPage(e)}><span aria-hidden="true">&laquo;&laquo;</span></a>
             </li>
-            <li class={{ disabled: this.pages.current_page === 1 }}>
+            <li class={{ disabled: this.currentPage === 1 }}>
               <a href="#" on-click={(e) => this.previous(e)}><span aria-hidden="true">&laquo;</span></a>
             </li>
             {this.paginationItems}
-            <li class={{disabled: this.pages.current_page === this.pages.last_page}}>
+            <li class={{disabled: this.currentPage === this.lastPage}}>
               <a href="#" on-click={(e) => this.next(e)}><span aria-hidden="true">&raquo;</span></a>
             </li>
-            <li class={{ disabled: this.pages.current_page === this.pages.last_page }}>
-              <a href="#" on-click={(e) => this.lastPage(e, this.pages.last_page)}><span aria-hidden="true">&raquo;&raquo;</span></a>
+            <li class={{ disabled: this.currentPage === this.lastPage }}>
+              <a href="#" on-click={(e) => this.goTolastPage(e, this.lastPage)}><span aria-hidden="true">&raquo;&raquo;</span></a>
             </li>
           </ul>
         </nav>
       </div>
     )
   },
-  props: ['pages'],
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    perPage: {
+      type: Number,
+      default: 0
+    }
+  },
   created () {
     window.addEventListener('keyup', ({key}) => this.changePageWithKeyBoard(key))
   },
+  data () {
+    return {
+      currentPage: 1
+    }
+  },
   computed: {
     items: DatasourceUtils.gettingItems,
     paginationItems () {
       return this.items.map((item, index) => {
-        return <li class={{active: (this.pages.current_page === item)}}>
+        return <li class={{active: (this.currentPage === item)}}>
           <a href="#" on-click={(e) => this.change(e, item)}>{item}</a>
         </li>
       })
+    },
+    lastPage () {
+      if (this.total === 0) return 1
+      return parseInt(((this.total - 1) / this.perPage) + 1)
     }
   },
   methods: {
     firstPage (e) {
       e.preventDefault()
-      if (this.pages.current_page !== 1) {
+      if (this.currentPage !== 1) {
         this.change(e, 1)
       }
     },
     previous (e) {
       e.preventDefault()
-      if (this.pages.current_page !== 1) {
-        this.change(e, --this.pages.current_page)
+      if (this.currentPage !== 1) {
+        this.change(e, --this.currentPage)
       }
     },
     change (e, page) {
       e.preventDefault()
+      this.currentPage = page
       EventBus.$emit('pagination-change', page)
     },
     next (e) {
       e.preventDefault()
-      if (this.pages.current_page !== this.pages.last_page) {
-        this.change(e, ++this.pages.current_page)
+      if (this.currentPage !== this.lastPage) {
+        this.change(e, ++this.currentPage)
       }
     },
-    lastPage (e, page) {
+    goTolastPage (e, page) {
       e.preventDefault()
-      if (this.pages.current_page !== this.pages.last_page) {
+      if (this.currentPage !== this.lastPage) {
         this.change(e, page)
       }
     },

src/components/ServerDatasource.vue

@@ -1,6 +1,6 @@
 <script>
 import DatasourceUtils from '../utils/DatasourceUtils'
-import Pagination from './Pagination.vue'
+import Pagination from './Pagination'
 import {EventBus} from '../utils/EventBus'
 export default {
   name: 'ServerDatasource',
@@ -32,9 +32,6 @@ export default {
               </thead>
               <tbody>
                 {this.columnObjects}
-                <tr>
-                  <td class="text-center warning" colspan={this.columns.length}>{this.tableInfo}</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -43,7 +40,7 @@ export default {
               {this.actionsObject}
             </div>
             <div class="pull-right">
-              <pagination pages={this.pagination}></pagination>
+              <pagination total={this.total} per-page={this.perpage}></pagination>
             </div>
             <div class="clearfix"></div>
           </div>
@@ -60,6 +57,14 @@ export default {
       type: Array,
       required: true
     },
+    /**
+     * Total of items
+     * @type {Number}
+     */
+    total: {
+      type: Number,
+      required: true
+    },
     /**
      * Limits to display
      * @type {Array}
@@ -116,16 +121,10 @@ export default {
   data () {
     return {
       perpage: 10,
+      current_page: 1,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
-      search: '', // word to search in the table,
-      pagination: {
-        total: 0,
-        to: 0,
-        from: 0,
-        per_page: 10,
-        current_page: 1
-      }
+      search: '' // word to search in the table,
     }
   },
   computed: {
@@ -166,8 +165,7 @@ export default {
           console.warn(`[VueDatasource] The callback show is not defined in action ${action.text}.`)
         }
       })
-    },
-    tableInfo: DatasourceUtils.tableInfo
+    }
   },
   methods: {
     fetchFromObject: DatasourceUtils.fetchFromObject,
@@ -182,7 +180,7 @@ export default {
     searching (e) {
       this.selected = null
       this.indexSelected = -1
-      this.pagination.current_page = 1
+      this.current_page = 1
       this.$emit('searching', e.target.value)
     }
   },
@@ -194,7 +192,7 @@ export default {
     perpage () {
       this.selected = null
       this.indexSelected = -1
-      this.pagination.current_page = 1
+      this.current_page = 1
       this.$emit('change', {perpage: this.perpage, page: 1})
     },
     source () {

src/utils/DatasourceUtils.js

@@ -26,7 +26,7 @@ export default {
   changePage (page) {
     this.selected = null
     this.indexSelected = -1
-    this.pagination.current_page = page
+    this.current_page = page
     this.$emit('change', { perpage: this.perpage, page: page })
   },
 
@@ -50,50 +50,40 @@ export default {
     }
   },
 
-  /**
-   * Computed property: Building custom string information with translation
-   * @returns {String}
-   */
-  tableInfo () {
-    let labelShow = this.translation.pagination.show
-    let from = (this.pagination.from === null) ? 0 : this.pagination.from
-    let labelTo = this.translation.pagination.to
-    let to = (this.pagination.to === null) ? 0 : this.pagination.to
-    let labelOf = this.translation.pagination.of
-    let total = this.pagination.total
-    let labelEntries = this.translation.pagination.entries
-    return `${labelShow} ${from} ${labelTo} ${to} ${labelOf} ${total} ${labelEntries}`
-  },
-
   /**
    * Computed property: Build custom array with the pagination items
    * @return Array
    */
   gettingItems () {
     let temp = []
-    let bottomLimit = this.pages.current_page - 2
-    let topLimit = this.pages.current_page + 2
+    let bottomLimit = this.currentPage - 2
+    let topLimit = this.currentPage + 2
     let showing = 5
     if (bottomLimit <= 0) {
       bottomLimit = 1
       topLimit = 5
     }
-    if (topLimit >= this.pages.last_page) {
-      bottomLimit = this.pages.last_page - 4
-      topLimit = this.pages.last_page
+    if (topLimit >= this.lastPage) {
+      bottomLimit = this.lastPage - 4
+      topLimit = this.lastPage
     }
-    if (this.pages.last_page < 5) {
-      showing = this.pages.last_page
+    if (this.lastPage < 5) {
+      showing = this.lastPage
     }
     if (bottomLimit <= 0) {
       bottomLimit = 1
     }
-    if (this.pages.last_page === 0 || this.pages.last_page === 1) {
+    if (this.lastPage === 0 || this.lastPage === 1) {
       showing = 1
     }
     for (let i = 0; i < showing; i++) {
       temp[i] = i + bottomLimit
     }
     return temp
+  },
+
+  roundNumber (value, precision) {
+    let multiplier = Math.pow(10, precision || 0)
+    return Math.round(value * multiplier) / multiplier
   }
 }