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.

    Navigate.

    Page of

    animals variable contents: 

    []

    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>