Vue paginatiton jorah

A simple pagination component for Vue.js

Version: 1.0.0 Updated: 09/14/2017

By: lokyoung License: MIT

Downloads Last 30 Days: 15

vuejs-paginate

npm version Build Status Code Climate

NPM

A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate.

Easy to use by providing simple api. And you can customize the style of this component by css.

Online demo

Installation

NPM

Install the npm package.

$ npm install vuejs-paginate --save

Register the component.

  • ES5

    var Paginate = require('vuejs-paginate')
    Vue.component('paginate', Paginate)
  • ES6

    import Paginate from 'vuejs-paginate'
    Vue.component('paginate', Paginate)

Note: For version <= 0.5.0, use Vue.use(Paginate) to register the component after import the package. But recommend to use the latest version now.

CDN

Include the source file.

<!-- use the latest release -->
<script src="https://unpkg.com/vuejs-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/vuejs-paginate@0.9.0"></script>

Register the component.

Vue.component('paginate', VuejsPaginate)

Usage

In Vue Template

Basic Usage

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'className'">
</paginate>

Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop page-count or pageCount. They are leading to the same result.

So this is also avaliable

<paginate
  :pageCount="20"
  :clickHandler="functionName"
  :prevText="'Prev'"
  :nextText="'Next'"
  :containerClass="'className'">
</paginate>

Example

<template>
  <paginate
    :page-count="20"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</template>

<script>
export default {
  methods: {
    clickCallback (pageNum) => {
      console.log(pageNum)
    }
  }
}
</script>

<style lang="css">
.pagination {
}
.page-item {
}
</style>

In HTML

Must use kebab-case for props in pure HTML.

Example

JavaScript

Vue.component('paginate', VuejsPaginate)

new Vue({
  el: '#app',
  methods: {
    clickCallback: function(pageNum) {
      console.log(pageNum)
    }
  }
})

HTML

<div id="app">
  <paginate
    :page-count="10"
    :container-class="pagination"
    :prev-text="prev"
    :next-text="next"
    :click-handler="clickCallback">
  </paginate>
</div>

Customize prev and next button inner HTML (experimental)

You can customize the inner HTML of previous and next button with slot tag. The name of the previous and next button is prevContent and nextContent.

Example

<paginate
  :page-count="10"
  :container-class="pagination"
  :prev-text="prev"
  :next-text="next"
  :click-handler="clickCallback">

  <span slot="prevContent">Changed previous button</span>
  <span slot="nextContent">Changed next button</span>

</paginate>

Props

Name Type Description
page-count Number Total count of pages. required
page-range Number Range of pages which displayed. default: 3
margin-pages Number The number of displayed pages for margins. default: 1
prev-text String Text for the previous button. default: Prev
next-text String Text for the next button. default: Next
initial-page Number The index of initial page which selected. default: 0
force-page Number The index of overridden selected page.
click-handler Function The method to call when page clicked. Use clicked page number as parameter.
container-class String CSS class name for the layout.
page-class String CSS class name for tag li of each page element.
page-link-class String CSS class name for tag a of each page element.
prev-class String CSS class name for tag li of previous element.
prev-link-class String CSS class name for tag a of previous element.
next-class String CSS class name for tag li of next element.
next-link-class String CSS class name for tag a of next element.
no-li-surround Boolean Support no li tag surround a tag. default: false

Note: If for some reason you need to programmatically modify the current page, declare a ref for your <paginate> component then, once mounted, you will be able to change the selected page using this.$refs.paginate.selected = 42 . To bind such a modification to data change, use a Vue watch.

Demo

You can see the demo for quickly understand how to use this package.

$ cd vuejs-paginate
$ npm install
$ npm run demo

Check the code from ./demo/index.html and ./demo/App.vue.

Categories: Vue js