Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Vue.js Project to Render Pagination Using jw-vue-pagination Library in Browser Using Javascript

Posted on January 21, 2023

 

 

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

 

 

JavaScript
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

 

 

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

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme