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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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> |