Vue.js Paginator

Pagination with Vue.js made simple.


Code on GitHub Available on npm Available on cdnjs

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>

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.

Customize Paginator

If you want to receive data from an API where the response is something like this: 

              {
                "nested": {
                  "current_page": 1,
                  "last_page": 3,
                  "next_page_url": "/api/animals?page=2",
                  "prev_page_url": null,
                  "data": [
                  {
                    "id": 1,
                    "name": "Crocodile"
                  },
                  {
                    "id": 2,
                    "name": "Bobcat"
                  },
                  {
                    "id": 3,
                    "name": "Elephant"
                  },
                  {
                    "id": 4,
                    "name": "bandicoot"
                  },
                  {
                    "id": 5,
                    "name": "barracuda"
                  }
                  ]
                }
              }

Change the texts of the navigation buttons by creating an options object and pass it as a property to the paginator.


                // If you are using the library from cdn you don't have to import these.
                import Vue from 'vue'
                import VueResource from 'vue-resource'
                import VuePaginator from 'vuejs-paginator'

                Vue.use(VueResource)
                //end if

                new Vue({
                  el: '#app',
                  components: {
                    VPaginator: VuePaginator
                  },
                  data: {
                    animals: [],
                    resource_url: '/api/animals',
                    options: {
                      remote_data: 'nested.data',
                      remote_current_page: 'nested.current_page',
                      remote_last_page: 'nested.last_page',
                      remote_next_page_url: 'nested.next_page_url',
                      remote_prev_page_url: 'nested.prev_page_url',
                      next_button_text: 'Go Next',
                      previous_button_text: 'Go Back'
                    }
                  },
                  methods: {
                    updateResource(data){
                      this.animals = data
                    }
                  }
                });

And in your HTML pass the options prop: 


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