Features Star VueJs Paginator is a simple but powerful plugin since it gives you access on how to render the data, instead of using a predefined table.

It takes a resource_url and generates simple pagination buttons. Every time a page is changed or fetched, it emits an event to update the resource.

In Action List animals from a remote source. {{ animal.name }} Navigate. animals variable contents: {{ animals }}

Installation Using npm: npm install vuejs-paginator --save Or from a cdn: <script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.0/vuejs-paginator.min.js"></script> <!--or--> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/2.0.0/vuejs-paginator.js"></script>

Usage Import VuePaginator and define it in your components. new Vue({ el: '#app', data () { return { // The resource variable animals: [], // Here you define the url of your paginated API resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json' } }, components: { VPaginator: VuePaginator }, methods: { updateResource(data){ this.animals = data } } ... }); Use it in your HTML <v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator> Use it in your HTML

That's it! Every time a page is changed or fetched, resource variable will contain the returned data.

<ul> <li v-for="animal in animals"> {{ animal.name }} </li> </ul>

Configuration (optional) Available Options Name Type Default Description offset Number 0 Pixels to offset from top of screen when calculating position of scroll. remote_data String 'data' The key on the response object which contains the value for data. remote_current_page String 'current_page' The key on the response object which contains the value for current_page. remote_last_page String last_page The key on the response object which contains the value for last_page. remote_next_page_url String 'next_page_url' The key on the response object which contains the value for next_page_url. remote_prev_page_url String 'prev_page_url' The key on the response object which contains the value for prev_page_url. previous_button_text String 'Previous' The text value of the previous button. next_button_text String 'Next' The text value of the next button. headers String null Additional headers that will be included in the HTTP call.

Fetch Data Manually You can fetch data manually in two ways: By updating the resource_url .

. By calling Paginator's fetchData() method. In both ways, the Paginator will emit the update event and update the resource variable. To access Paginator's fetchData() you have to assign a reference ID to the component using ref . For example:



<v-paginator :resource_url="resource_url" ref="vpaginator" @update="updateResource"></v-paginator>

Then you can call vm.$refs.vpaginator.fetchData(resource_url) . If no resource_url is passed, the current page will be fetched again. You can fetch data manually in two ways:In both ways, the Paginator will emit theevent and update the resource variable. To access Paginator'syou have to assign a reference ID to the component using. For example:Then you can call. If nois passed, the current page will be fetched again.