vue-pagination-bootstrap

vue-pagination-bootstrap

Server-side paging component in vue, template based on bootstrap

• Vue.js (tested with 2.x)
• Bootstrap CSS (tested with 4.x)

Installation

$ npm install vue-pagination-bootstrap

Example

import pagination from 'vue-pagination-bootstrap'
    
new Vue({
  el: '#app',,
  components: { pagination }
  data () {
    return {
      total: 1000,
      pageSize: 50,
      paginationOptions: { // Not required to pass this configurations
		    offset: 2,
        previousText: 'Prev',
        nextText: 'Next',
        alwaysShowPrevNext: true
      }
    }
  },
  methods: {
    pageChanged (page) {            
      console.log(page)
      // Exec your response to server passing 'page' params as clicked button paging
    }
  }
})

<body id="app">
  <pagination :total="total" :page-size="pageSize" :callback="pageChanged" :options="paginationOptions" nav-class="padding-10" ul-class="bg-color-red" li-class="txt-color-blue">
  </pagination>
</body>

Props

Options