vue-slim-paginator v1.1.0

Vue-Slim-Paginator

There are tons of plugins that provide pagination. Why do you need to use this one? The simple answer is it is much better. With it, you can add pagination to your app and style it any way you like without any effort.

Installation

npm i --save vue-slim-paginator

Usage

Import and use the plugin

import vue from 'vue';

import VueSlimPaginator from 'vue-slim-paginator';

Vue.use(VueSlimPaginator);

Now you can access the component \\ in all your own vue components.

Pass Props

The vue paginator component needs two properties: meta and pagesPerSection.

meta:

The meta prop is required and has to be an object which contains 3 properties:

• total: the total number of items that needs pagination
• current_page: the current page number
• last_page: last page number

pagesPerSection:

The pagesPerSection is used to config how many pages you want to display in a section. It is optional and the default value is 10.

Slot Scope

The vue paginator uses slot-slot to give you all the things you need for pagination. Consider the following example:

<template>
  <v-paginator :meta="meta">
     <div slot-scope="{showPaginator, pages, switched, sections}">
     </div>
  </v-paginator>
</template>

The vue paginator exposes 4 props that can be used in its parent component

showPaginator:

It is used to hide the pagaintor when you are fetching the data or when there is no data coming back.

<template>
  <v-paginator :meta="meta">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switched, sections}">
    </div>
  </v-paginator>
</template>

pages:

The pages is used to display page items during a section, like below

<template>
  <v-paginator :meta="meta">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switched, sections}">
        <li class="page-item" v-for="(page, index) in pages" :key="index">
            <a class="page-link" href="#">
                {{ page }}
            </a>
        </li>
    </div>
  </v-paginator>
</template>

switched:

The switched provides you with functionality to go to next page, previous page or a specific page:

• switched.prev: go to previous page
• switched.next: go to next page
• switched.toPage(page): go to a specific page

<template>
  <v-paginator :meta="meta">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switched, sections}">
        <li class="page-item" @click.prevent="switched.prev">
            <a class="page-link" href="#" >
                Previous
            </a>
        </li>

        <li class="page-item" v-for="(page, index) in pages" :key="index">
            <a class="page-link" href="#" @click.prevent="switched.toPage(page)">
                {{ page }}
            </a>
        </li>

        <li class="page-item" @click.prevent="switched.next">
            <a class="page-link" href="#">
                Next
            </a>
        </li>
    </div>
  </v-paginator>
</template>

sections:

The sections allows you to easily go to next or previous section. It also helps you hide section indicator where is no next and previous section.

• sections.showPrev: boolean, whether there is a previous section or not
• sections.showNext: boolean, whether there is a next section or not
• sections.next: go to next section
• sections.prev: go to previous section

<template>
  <v-paginator :meta="meta">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switched, sections}">
        <li class="page-item" @click.prevent="switched.prev">
            <a class="page-link" href="#" >
                Previous
            </a>
        </li>

        <li class="page-item" v-if="sections.showPrev" @click.prevent="sections.prev">
            <a class="page-link" href="#">
            ...
            </a>
        </li>

        <li class="page-item" v-for="(page, index) in pages" :key="index">
            <a class="page-link" href="#" @click.prevent="switched.toPage(page)">
                {{ page }}
            </a>
        </li>

        <li class="page-item" v-if="sections.showNext" @click.prevent="sections.next">
            <a class="page-link" href="#">
            ...
            </a>
        </li>

        <li class="page-item" @click.prevent="switched.next">
            <a class="page-link" href="#">
                Next
            </a>
        </li>
    </div>
  </v-paginator>
</template>

Page switched event

When user navigates to a different page, the event pagination:switched will be emitted. So you can simply listen for this event and fetch the data again.

<template>
  <v-paginator :meta="meta" @pagination:switched="getUsers">
    <div v-if="showPaginator" slot-scope="{showPaginator, pages, switched, sections}">
        <li class="page-item" @click.prevent="switched.prev">
            <a class="page-link" href="#" >
                Previous
            </a>
        </li>

        <li class="page-item" v-if="sections.showPrev" @click.prevent="sections.prev">
            <a class="page-link" href="#">
            ...
            </a>
        </li>

        <li class="page-item" v-for="(page, index) in pages" :key="index">
            <a class="page-link" href="#" @click.prevent="switched.toPage(page)">
                {{ page }}
            </a>
        </li>

        <li class="page-item" v-if="sections.showNext" @click.prevent="sections.next">
            <a class="page-link" href="#">
            ...
            </a>
        </li>

        <li class="page-item" @click.prevent="switched.next">
            <a class="page-link" href="#">
                Next
            </a>
        </li>
    </div>
  </v-paginator>
</template>

<script>
export default {
    data() {
        return {
            users: [],
            meta: {}
        };
    },
    methods: {
        getUsers(page) {
            // fetch data and assign meta
        }
    },
    created() {
        this.getUsers();
    }
};
</script>

Update url

This plugin doesn't update your url (include the current page number in the query string). In reality, too often you will also have filters to filter the data. So you may want to add your filters and current page number to the query string of the url. If you don't know how to do that, check BlumaPaginator.vue in demo-src/components demonstrates for more details.