Fixed pagination for only works with total and perpage , now the component calc the pager

Author: coderdiaz

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)
       }
     },