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