Skip to content

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

License

Notifications You must be signed in to change notification settings

brunoseco/vue-pagination-bootstrap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published