Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

vue-pagination-bootstrap

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

vue-pagination-bootstrap

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

    1.0.3latest

Version published
Maintainers
1
Yearly downloads
8,572
increased by19.07%

Weekly downloads

Readme

Source

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

NameTypeDefaultRequiredDescription
totalNumbertrueTotal itens in server side
pageSizeNumbertrueNumber of itens in page
callbackFunctiontrueCallback function used to load data for selected page
nav-classStringfalseClass will be include in nav element
ul-classStringfalseClass will be include in ul element
li-classStringfalseClass will be include in all li element
Options
NameStringDefaultDescription
offsetNumber3Left and right offset of pagination numbers to display
ariaPreviousStringPreviousChange default aria previous text
ariaNextStringNextChange default aria next text
previousTextString«Change default previous button text
nextTextString»Change default next button text
alwaysShowPrevNextBooleanfalseShow prev/next button even if on first/last page

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc