Socket
Socket
Sign inDemoInstall

vue-pagination-bootstrap

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-pagination-bootstrap

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


Version published
Weekly downloads
75
increased by22.95%
Maintainers
1
Install size
5.98 kB
Created
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"></pagination>
</body>
Props
NameTypeDefaultRequiredDescription
totalNumbertrueTotal itens in server side
pageSizeNumbertrueNumber of itens in page
callbackFunctiontrueCallback function used to load data for selected page
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

FAQs

Last updated on 14 Jun 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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc