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>

<!DOCTYPE html>

<head>

<title>Vue.js - Pagination Tutorial & Example</title>

<style>

a { cursor: pointer; }

.pagination {

justify-content: center;

flex-wrap: wrap;

}

</style>

</head>

<body>

</div>

</body>

</html>

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)
});

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>

<h3 class="card-header">Vue.js Pagination Tutorial & Example</h3>

</div>

<jw-pagination :pageSize=20 :items="exampleItems" @changePage="onChangePage"></jw-pagination>

</div>

</template>

// 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>

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

Dependencies

Screenshots

Leave a Reply Cancel reply

Dependencies

Screenshots

Related posts:

You Might Also Like

Build a HTML2PDF.js PDF Generator in Vue.js Using vue-html2pdf Library in Browser Using Javascript Full Project For Beginners

Build a Vue.js PDF Document Viewer or Reader With Toolbar Using PDF.js Library and Webpack and Javascript in Browser Full Project For Beginners

Vue.js Image Uploader + Cropper and Base64 Converter Using HTML5 Canvas in Browser Using Javascript Full Project For Beginners

Leave a Reply Cancel reply