Code Monkey home page Code Monkey logo

vuejs-paginate's Introduction

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/[email protected]"></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>

Props

Name                                        Type Description
page-count Number Total count of pages. required
page-range Number Range of pages which displayed. default: 3
(Note: It is recommended to use an odd number, so that the same number of pages are displayed before and after the active page. If using an even number, there will be one more page number before the active page than after the current page)
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
break-view-text String Text for the break view indicator. default: ...
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.
break-view-class String CSS class name for tag li of break view element.
break-view-link-class String CSS class name for tag a of break view element.
active-class String CSS class name for active page element. default: active
disabled-class String CSS class name for disabled page element. default: disabled
no-li-surround Boolean Support no li tag surround a tag. default: false
first-last-button Boolean Support buttons to turn to the first and last page. default: false
first-button-text String Text for first button. (Not visible when first-last-button is false.) default: 'First'
last-button-text String Text for last button. (Not visible when first-last-button is false.) default: 'Last'
hide-prev-next Boolean Hide prev/next button when there is no previous or next page. 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.

Customize inner HTML (experimental)

You can customize the inner HTML of the previous button, next button, and break view indicator, with the slot tag.

Slot names

Name Description
prevContent Previous button
nextContent Next button
breakViewContent Break view indicator

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>
  <span slot="breakViewContent">
    <svg width="16" height="4" viewBox="0 0 16 4">
      <circle fill="#999999" cx="2" cy="2" r="2" />
      <circle fill="#999999" cx="8" cy="2" r="2" />
      <circle fill="#999999" cx="14" cy="2" r="2" />
    </svg>
  </span>

</paginate>

Demo

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

$ git clone [email protected]:lokyoung/vuejs-paginate.git
$ cd vuejs-paginate
$ npm install
$ npm run demo

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

vuejs-paginate's People

Contributors

lokyoung avatar calebkester avatar rewwer avatar ronjouch avatar liaohainan avatar stamlercas avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.