Build Simple Vue.js Pagination Using jw-vue-pagination Library Full Tutorial For Beginners

Build Simple Vue.js Pagination Using jw-vue-pagination Library Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this post we will be talking about how to build vue.js pagination using jw-vue-pagination library. All the source code of the application is given below. A step by step youtube video is also show below.

 

 

 

 

Dependencies

 

We are using jw-vue-pagination dependency for building this app

To install this first of all go to your command prompt and type the following command as follows

 

npm i jw-vue-pagination

 

Screenshots

 

 

Now make the public.html file and copy paste the following code to it

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js - Pagination Tutorial & Example</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        a { cursor: pointer; }
        .pagination {
           justify-content: center;
           flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="app"></div>

        
    </div>
</body>
</html>

 

READ  Vue.js Temperature Converter (Celsius + Fahrenheit) Widget in Browser Using Javascript Full Project For Beginners

 

Now inside yourindex.js file and copy paste the following code to it. In this file we will import the plugin jw-vue-pagination and register to Vue.

 

import Vue from "vue";

import App from "./app/App";

// make jw pagination component available in application
import JwPagination from 'jw-vue-pagination';
Vue.component('jw-pagination', JwPagination);

new Vue({
    el: "#app",
    render: h => h(App)
});

 

 

Now we will make our app.vue file to render out the pagination component

 

<template>
    <div class="card text-center m-3">
        <h3 class="card-header">Vue.js Pagination Tutorial & Example</h3>
        <div class="card-body">
            <div v-for="item in pageOfItems"  :key="item.id">{{item.name}}</div>
        </div>
        <div class="card-footer pb-0 pt-3">
            <jw-pagination :pageSize=20 :items="exampleItems" @changePage="onChangePage"></jw-pagination>
        </div>
    </div>
</template>

<script>
// an example array of items to be paged
const exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));

export default {
    data() {
        return {
           exampleItems,
           pageOfItems: []
        };
    },
    methods: {
        onChangePage(pageOfItems) {
            console.log(pageOfItems)
            // update page of items
            this.pageOfItems = pageOfItems;
        }
    }
};
</script>

 

READ  Build Vue.js Vimeo Video Player Using vue-vimeo-player Library in Javascript Full Project For Beginners

 

 

Leave a Reply