vue-paginate-component

Install

NPM

Install the package:

npm install @profesia/vue-paginate-component --save-dev

Then import it in your project

import Vue from 'vue'
import paginate from '@profesia/vue-paginate-component'

Vue.use(Vuex);

new Vue({
    el: '#app',
    
    components: {
        paginate,
    },
});

Browser global

Just include vue & paginate

<script src="path/to/vue.js"></script>
<script src="path/to/dist/js/paginate.min.js"></script>

Usage

Simply use it like so:

<paginate :items="itemsList" class="custom-class" :perPage="5" :infoText="{ beforeSelection: 'Showing ', afterSelection: ' from ', afterTotal: ' results' }">
    <template slot="header">
        ... your template for section above listing
    </template>
    <template slot-scope="{ item }">
        ... your own template, where you can use your items from like object, for example `item.name` 
    </template>
    <template slot="footer">
        ... your template for section below listing
    </template>
</paginate>

Options

items

Mandatory. An array of list items.

perPage

Optional. Number of list items, which should be displayed. Defaults to 10.

startPage

Optional. Number. Start listing items from specific page number. Defaults to 1.

showHeaderPagination

Optional. Boolean. If true, the pagination will display at the top of the list. Defaults to false.

showFooterPagination

Optional. Boolean. If true, the pagination will display at the bottom of the list. Defaults to true.

showHeaderInfoText / showFooterInfoText

Optional. Boolean. If true, info text will display above the pagination. Defaults to true.

showHeaderPaginationList / showFooterPaginationList

Optional. Boolean. If true, the pagination numbers will display. Defaults to true.

showEvenIfEmpty

Optional. Boolean. If true, the pagination will display even if items count equal 0. Defaults to false.

infoText

Optional. Object. Store for info texts with three keys - beforeSelection, afterSelection and afterTotal. Defaults to: beforeSelection: 'Results ', afterSelection: ' from ', afterTotal: ''

anchor

Optional. String. Name of anchor, where page should scroll to after pagination click. Defaults to ''.

## Structure

Once the select has been rendered, it'll create the following structure:

### HTML

##### Single map
````html
<div class="vue-paginate-component">
    <ul class="vue-paginate-items">
        <li>
            ... your template ...
        </li>
    </ul>
    
    <div class="vue-pagination vue-pagination-footer">
        <div class="vue-pagination-info">
            Results <span class="vue-pagination-info-from-to">1 - 5</span> z <span class="vue-pagination-info-all">345</span>
        </div>
        <ul class="vue-pagination-list">
            <li class="vue-pagination-disabled"><span class="vue-pagination-previous-page">❮</span></li>
            <li class="vue-pagination-number vue-pagination-active"><span>1</span></li>
            <li class="vue-pagination-number vue-pagination-dots vue-pagination-dots-after"><span>2</span></li>
            ...
            <li class=""><span class="vue-pagination-next-page">❯</span></li>
        </ul>
    </div>
</div>

CSS

All CSS is based upon this structure.

.vue-paginate-component {
  ...
}

.vue-paginate-items {
  ...
}

.vue-pagination {
  ...
}

.vue-pagination-info {
  ...
}

.vue-pagination-list {
  ...
}

.vue-pagination-number {
  ...
}

FAQ

• How can I provide feedback? - Send an email to [email protected]; any feedback is appreciated.

Release History

• 0.2.0 Add prop to show paginate event if items count is 0
• 0.1.0 Add slots named header and footer to add possibility to add HTML code above or under items list
• 0.0.7 Fix missing dots between numbers on mobile, show number 3 on desktop when number of total pages is 5
• 0.0.6 Fix missing dots between numbers
• 0.0.5 Change babel preset to env
• 0.0.4 Fix default value for showHeaderPagination
• 0.0.3 Fix pagination counter
• 0.0.2 Add anchor option
• 0.0.1 Initial release