Welcome folks today in this blog post we will be using the jw-vue-pagination
library in vue.js to do the pagination
of items in browser using Vue.js. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below library using the below command as shown below
npm i jw-vue-pagination
And now you will see the below directory
structure of the vue.js
app as shown below
Registering the Library
Now guys we need to go to index.js
file and copy paste the following code
index.js
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) }); |
As you can see we are importing the jw-pagination
library and registering it.
And now you need to go to index.html
and copy paste the following code and include the bootstrap cdn
as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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> </body> </html> |
And now inside the app
folder we need to make the App.vue
file and copy paste the following code
App.vue
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 |
<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 :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) { // update page of items this.pageOfItems = pageOfItems; } } }; </script> |