vue-bootstrap-pagination

vue-pagination

Vue pagination component for use with Bootstrap and Laravel pagination.

• Vue.js (tested with 2.2.1).
• Bootstrap CSS (tested with 3.3.7)

To use with Vue.js 1 use the 1x version.

Laravel is not required as long as the pagination object contains the required attributes

• current_page,
• last_page,
• per_page,

Installation

npm install --save vue-bootstrap-pagination

or

yarn add vue-bootstrap-pagination

Example

import pagination from 'vue-bootstrap-pagination'

new Vue({
  el: '#app',
  data() {
    return {
      items: [],
      pagination: {
        total: 0,
        per_page: 12,    // required
        current_page: 1, // required
        last_page: 0,    // required
        from: 1,
        to: 12
      },
      paginationOptions: {
        offset: 4,
        previousText: 'Prev',
        nextText: 'Next',
        alwaysShowPrevNext: true
      }
    }
  },
  methods: {
    loadData() {
      const options = {
        params: {
          paginate: this.pagination.per_page,
          page: this.pagination.current_page,
          /* additional parameters */
        }
      };
      this.$http.get('/getData', options)
        .then(response => {
          this.items = response.data.data;
        
          // Overwrite pagination object
          this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object
        
          // Or overwrite only values
          /*
            this.pagination.current_page = response.data.current_page;
            this.pagination.last_page = response.data.last_page;
            ...
          */
         })
         .catch(error => {
            // handle error
         });
    }
  },
  components: {
    pagination
  }
})

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

  <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
</body>

Props

Offset prop has ben removed with version 2.10.0. Use options.offset instead

Options

If you change this.pagination.per_page the callback function will be called

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.