Install via NPM
npm i vue-paginater --save-dev
or
npm i vue-paginater --save
Require in your project:
var VuePaginater = require('vue-paginater');
or ES6 syntax:
import VuePaginater from 'vue-paginater'
You can register the component globally:
Vue.component('vue-paginater', VuePaginater)
Or locally in a single Vue component:
components: { 'vue-paginater':VuePaginater},
Prop | Type | Default | Description |
---|---|---|---|
maxVisibleButtons | Number | 3 | Amount of pages to show in pagination |
total | Number | - | Total amount of results or iteration count |
max | Number | 0 | If totalPages unset you must set how many entries you are showing per page i.e. 10 lines per page |
enablePageListing | Boolean | true | show page numbers ? |
enableFirstPage | Boolean | true | show first Button taking user to page 1? |
enableLastPage | Boolean | true | show last Button taking user to last page ? |
firstLabel | String | First | Text to show as First button |
lastLabel | String | Last | Text to show as Last button |
nextLabel | String | Next | Text to show as Next button |
previousLabel | String | Previous | Text to show as Previous button |
disabled | Boolean | false | Disable pagination |
Event | Description |
---|---|
@offset | Gives you back your current offset to go off and retrieve records from |
@pagechanged | gives you current page number - but not really needed by you |
<vue-paginater total="300" max="10" @offset="giveOffset"/>
<script>
import VuePaginater from 'vue-paginater'
export default {
components: {
VuePaginater
},
methods: {
giveOffset(offset) {
console.log('currentOffet '+offset)
//MyService.fetch('balh?offset='+offset)
}
}
}
</script>
- Working release built on webpack 4 - includes
vue-paginater
This was the origins