New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

vue-bootstrap-pagination

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-bootstrap-pagination

Pagination for vuejs with combination with bootstrap and Laravel's pagination

2.10.3
latest
Source
npm

Version published: 8 years ago

Weekly downloads: 289; increased by58.79%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

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

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

Name	Type	Required	Description
pagination	Object	true	Pagination object used to create pagination
callback	Function	true	Callback function used to load data for selected page
options	Object		Configuration. Look below for available options
size	String		Change the default size of the pagination. Options: large, small.

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

Options

Name	String	Default	Description
offset	Number	3	Left and right offset of pagination numbers to display
ariaPrevious	String	Previous	Change default aria previous text
ariaNext	String	Next	Change default aria next text
previousText	String	«	Change default previous button text
nextText	String	»	Change default next button text
alwaysShowPrevNext	Boolean	false	Show prev/next button even if on first/last page

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.

Keywords

FAQs

What is vue-bootstrap-pagination?

Is vue-bootstrap-pagination popular?

Is vue-bootstrap-pagination well maintained?

Package last updated on 04 Jul 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install