Vue Pagination

Note: This package is for use with Vuejs 1. For version 2 please use vue-pagination-2 instead.

Simple, generic and non-intrusive pagination component for Vue.js. Presentation is based on bootstrap.

• Dependencies
• Installation
• Usage
• Programmatic Manipulation
• Computed Properties

Dependencies

• Vue.js (>=1.0). Required.
• Bootstrap (CSS). Optional.

Installation

Option 1

Compile the code using browserify with the stringify transform

npm install v-pagination

Require the script:

var VuePagination = require('v-pagination');

Option 2

Import the compiled standalone file into your HTML, which will expose a global VuePagination variable.

Usage

LIVE DEMO

Register the component

Vue.use(VuePagination)

HTML:

<pagination for="some-entity" :records="500"></pagination>

props:

• for string required unique identifier for the component instance.
• records number required number of records
• per-page number optional records per page. Default: 25
• chunk number optional max pages per chunk. Default: 10
• count-text string optional total records text. Default: '{count} records'

When a page is selected an event will be dispatched, using the unique id for the component. Listen to it and respond accordingly:

  this.$on('vue-pagination::some-entity', function(page) {
      // display the relevant records using the page param
  });

Programmatic Manipulation

To programmatically set the page apply a v-ref identifier to the component and use one of the following methods:

• setPage(page)
• next()
• prev()
• nextChunk()
• prevChunk()

All methods return true if the page is legal and was thus set, or false otherwise.

Computed Properties

• totalPages
• totalChunks
• currentChunk