Vue.js Bootstrap Faker.js REST API Pagination Using vue-paginator Library in Javascript Full Project For Beginners

Vue.js Bootstrap Faker.js REST API Pagination Using vue-paginator Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a bootstrap faker.js rest api pagination in vue.js using vue-paginator library in javascript. All the full source code of the application is given below.

 

 

Installation

 

 

In order to get started you need to create a brand new vue.js project and then install the below library using the npm command as shown below

npm i --save @zaichaopan/vue-paginator

 

Use the plugin

import vue from 'vue';

import VuePaginator from '@zaichaopan/vue-paginator';

Vue.use(VuePaginator);

 

Now you can use the component vue-paginator in all your own vue components.

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

 

Required Prop

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
READ  Vue.js PDF.js Library PDF Viewer Example to Display PDF Documents inside Browser Using Javascript Full Project Full Project For Beginners

Optional Prop

pagesPerSection:

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

Slot Scope

This plugin uses slot-slot to exposure 4 properties which can be used to build paginator.

  • showPaginator: a boolean value which is used to hide the pagaintor when you are fetching the data or when there is no data coming back
  • pages: an array which is used to display page items during a section
  • switcher: an object which provides you with functionality to go to next page, previous page or a specific page:
    • switcher.prev: method, go to previous page
    • switcher.next: method, go to next page
    • switcher.toPage(page): method, go to a specific page
  • section: an object which allows you to easily go to next or previous section. It also helps you hide section indicator where is no next and previous section.
    • section.showPrev: boolean, whether there is a previous section or not
    • section.showNext: boolean, whether there is a next section or not
    • section.next: method, go to next section
    • section.prev: method, go to previous section
READ  Vue.js Arithmetic Calculator Example Project Using Vuex in Browser Full Project For Beginners

 

 

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

        <li class="page-item" v-if="section.showPrev" @click.prevent="section.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="switcher.toPage(page)">
                {{ page }}
            </a>
        </li>

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

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

 

 

 

 

Live Demo

 

 

Vue.js REST API Pagination

 

Leave a Reply