Have ideas to improve npm?Join in the discussion! »

    v-pagination

    0.1.4 • Public • Published

    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

    • 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

    Install

    npm i v-pagination

    DownloadsWeekly Downloads

    71

    Version

    0.1.4

    License

    none

    Last publish

    Collaborators

    • avatar