M24-vue-pagination NPM

vue-pagination

Simple unstyled Vue pagination component.

Vue.js (tested with 2.6.11).

Installation

npm install --save m24-vue-pagination

Example

import pagination from 'm24-vue-pagination'

new Vue({
  el: '#app',
  data: {
    total: 0,
    currentPage: 1,
    items: [],
  },
  mounted () {
    this.loadData(this.currentPage)
  },
  methods: {
    loadData(page) {
      this.currentPage = page
      const options = {
        params: {
          page: this.currentPage
        }
      }

      window.axios.get('/getData', options)
        .then(response => {
          this.items = response.data.data
          this.total = response.data.paginate.total
         })
    }
  },
  components: {
    pagination
  }
})

<body id="app">
  <ul class="list-group">
    <li class="list-group-item" v-for="item in items">{{ item.name }}</li>
  </ul>

  <pagination
    :total="total"
    :page="currentPage"
    @page-change="loadData" />
</body>

Props

Name	Type	Default	Required	Description
total	Number		true	Total number of items
page	Number	0		The current page number
perPage	Number	10		Number of items per page
maxShown	Number	5		Number of items shown on each site
navBack	String	«		Back indicator (can be HTML, such as svg, icon...)
navFront	String	»		Forward indicator (can be HTML, such as svg, icon...)