/vue-pagination-bootstrap

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

Primary LanguageJavaScriptMIT LicenseMIT

vue-pagination-bootstrap

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

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

Name Type Default Required Description
total Number true Total itens in server side
pageSize Number true Number of itens in page
callback Function true Callback function used to load data for selected page
nav-class String false Class will be include in nav element
ul-class String false Class will be include in ul element
li-class String false Class will be include in all li element
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