DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Mocking Dependencies and AI Is the Next Frontier in Vue.js Testing
  • Serving a Vue.js Application With a Go Backend
  • Build Full-Stack Web App With Firebase, Angular 15, React.js, Vue.js, and Blazor [Video]
  • React, Angular, and Vue.js: What’s the Technical Difference?

Trending

  • A Simple, Convenience Package for the Azure Cosmos DB Go SDK
  • A Modern Stack for Building Scalable Systems
  • Agile and Quality Engineering: A Holistic Perspective
  • AI’s Role in Everyday Development
  1. DZone
  2. Coding
  3. JavaScript
  4. Dynamic Pagination With Vue.js

Dynamic Pagination With Vue.js

Learn how to set up dynamic pagination using Vue.js and Nuxt.js. In this tutorial, we'll go over the code to set up a web page, then add dynamic pagination.

By 
Denzel Vieta user avatar
Denzel Vieta
·
Updated Oct. 09, 21 · Tutorial
Likes (5)
Comment
Save
Tweet
Share
16.6K Views

Join the DZone community and get the full member experience.

Join For Free

                                                                                        (source laptops)

For this tutorial, I will be using Atom.

  • Download the Atom code editor.
  • Install the Vue-fmt plugin if you do not see code being highlighted.

Firstly, What Is Vue.js?

Vue.js is a single page application JavaScript framework. It has many similarities to Angular and React. It is a progressive web application framework that is useful for developing more interactive web apps. Along with web applications, Vue.js is widely used by many websites like GitLab, 9gag, Behance, and many others.

What Is Nuxt.js?

Nuxt.js is a framework for Vue.js. It is mainly used for server-side rendering of Vue.js apps. As this is a framework for Vue.js, there are many similarities between Nuxt.js and Vue.js. You do not need to make many changes in your app if you are migrating from Vue.js to Nuxt.js. This hexadecimal to decimal page is an example of server-side rendered app.

Getting Started

Now, we can start developing the project. Developing dynamic pagination requires you to have basic knowledge of Vue.js and Nuxt.js. You should know the installation process and basic HTML, CSS, and router-links. I have to tell you that Vue.js has one of the best tutorials, you can visit here to learn more.

In this article, we have used w3schools’s CSS material. Copy and paste the following code if you are developing an app with Nuxt.js.

CSS
 




xxxxxxxxxx
1
14


 
1
script: [
2
      { src: 'https://code.jquery.com/jquery-3.4.1.slim.min.js', integrity: 'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', crossorigin: 'anonymous' },
3
      { src: 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', integrity: 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', crossorigin: 'anonymous' },
4
      { src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', integrity: 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', crossorigin: 'anonymous' }
5
    ],
6
    link: [
7
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
8
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald'},
9
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Open Sans'},
10
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'},
11
      { rel: 'stylesheet', href: 'https://www.w3schools.com/w3css/4/w3.css'},
12
      { rel: 'stylesheet', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', integrity: 'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh', crossorigin:'anonymous'},
13
      { rel: 'stylesheet', href: 'https://www.w3schools.com/lib/w3-theme-black.css'}
14
    ]


And in case you are using Vue.js then update index.html.

HTML
 




x
11
9


 
1
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
4
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
5
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">


Let’s dive into the code,

The template tag contains all the basic HTML about laptops, RAM, operating system, and price, there is nothing “Vueish” about it except v-for.

You can use the v-for directive to render a list of items based on an array. The v-for directive requires “item in items,” in this case, the first v-for directive is “pageNumber in totalPages” and another v-for directive is “article in paginate,” which will get all the information about a laptop. When currentPage is set to 1, dynamic pagination will start from the first page. As soon as a user clicks on another page, currentPage updates to the page number clicked by the user. 

Template HTML:

HTML
 




x


 
1
<template lang="html">
2
    <div class="w3-light-grey">
3
        <div class="w3-content">
4
            <div class="w3-row w3-padding w3-border">
5
                <div class="w3-col l8 s12">
6
                    <div class="w3-container w3-white w3-margin w3-padding-large">
7
                        <div class="w3-justify">
8
                            <h1>Laptops</h1>
9
                            <br><br>
10
                            <div>
11
                                <button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{
12
                                                                  { 
13
                                                                      pageNumber 
14
                                                                  }
15
                                                               } 
16
                              </button>
17
                            </div>
18
                            <div class="container w3-white w3-card" v-for="article in paginate" :key="article._id">
19
                                <br>
20
                                <div class="row">
21
                                    <div class="col-sm-4">
22
                                        <img src="~/assets/laptop.jpg">
23
                                    </div>
24
                                    <div class="col-sm-4">
25
                                        <h5><span class="w3-large w3-text-teal">{
26
                                          { article.title 
27
                                          }
28
                                          },</span></h5>
29
                                        <span>OS: {{article.os}}</span><br>
30
                                        <span>{{article.size}} Inches</span><br>
31
                                        <span>{{article.ram}} GB RAM</span><br>
32
                                        <span v-if="article.storage >= 1000">{
33
                                                                             {                                                                  article.storage/1000 
34
                                                                             }
35
                                                                             } 
36
                                                            TB Storage,</span>
37
                                        <span v-else>{
38
                                          { 
39
                                          article.storage 
40
                                          }
41
                                          } GB Storage,</span><br>
42
                                    </div>
43
                                    <div class="col-sm-4">
44
                                        <h3>${
45
                                                 {
46
                                                     article.price
47
                                                 }
48
                                              }</h3>
49
                                        <p><a href=""><button class="w3-button w3-block w3-teal">Buy Now</button></a></p>
50
                                    </div>
51
                                </div>
52
                                <hr>
53
                            </div>
54
                            <div>
55
                                <button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{
56
                                  { 
57
                                    pageNumber 
58
                                  }
59
                              } 
60
                              </button>
61
                            </div>
62
                        </div>
63
                    </div>
64
                </div>
65
            </div>
66
        </div>
67
    </div>
68
</template>


Have a look at the following code, it is a data function with a return object which is used for two-way data binding. This object contains the articles array, which has all the information about a laptop's operating system, price, weight, size, storage, and RAM. You can update itemsPerPage to any number. If you want to show five items per page, then you can update that to 5.

JavaScript
 




x
79


 
1
data()
2
{
3
    return {
4
        articles: [
5
        {
6
            os: 'Windows',
7
            price: '500',
8
            weight: '3.9',
9
            size: '11.1',
10
            storage: '500',
11
            ram: '8',
12
            company: 'hp',
13
            title: 'HP laptop 14'
14
        },
15
        {
16
            os: 'Chromeos',
17
            price: '400',
18
            weight: '7.0 Pounds',
19
            size: '11.1',
20
            storage: '256 GB',
21
            ram: '4',
22
            company: 'hp',
23
            title: 'HP Chromebook 14'
24
        },
25
        {
26
            os: 'Windows',
27
            price: '450',
28
            weight: '3.9',
29
            size: '11.1',
30
            storage: '500',
31
            ram: '8',
32
            company: 'hp',
33
            title: 'HP laptop 14'
34
        },
35
        {
36
            os: 'Windows',
37
            price: '600',
38
            weight: '3.9',
39
            size: '11.1',
40
            storage: '500',
41
            ram: '8',
42
            company: 'hp',
43
            title: 'HP laptop 14'
44
        },
45
        {
46
            os: 'Windows',
47
            price: '700',
48
            weight: '3.9',
49
            size: '11.1',
50
            storage: '500',
51
            ram: '8',
52
            company: 'hp',
53
            title: 'HP laptop 14'
54
        },
55
        {
56
            os: 'Windows',
57
            price: '350',
58
            weight: '3.9',
59
            size: '11.1',
60
            storage: '500',
61
            ram: '8',
62
            company: 'hp',
63
            title: 'HP laptop 14'
64
        },
65
        {
66
            os: 'Windows',
67
            price: '400',
68
            weight: '3.9',
69
            size: '11.1',
70
            storage: '500',
71
            ram: '8',
72
            company: 'hp',
73
            title: 'HP laptop 14'
74
        }],
75
        currentPage: 1,
76
        itemsPerPage: 3,
77
        resultCount: 0
78
    }
79
},


Add the following code inside methods. The setPage function is called to update the current page.

JavaScript
 




xxxxxxxxxx
1


 
1
methods: {
2
    setPage: function(pageNumber) {
3
        this.currentPage = pageNumber
4
    },
5
},


Here is the computed property. totalPage is the logic for total dynamic pages. For example, if itemsPerPage is 3 and there are a total of 12 items in the articles array, then the totalPage element will be 4.

JavaScript
 




x


 
1
computed:
2
{
3
    /* eslint-disable */
4
    totalPages: function ()
5
    {
6
        if (this.resultCount == 0)
7
        {
8
            return 1
9
        }
10
        else
11
        {
12
            return Math.ceil(this.resultCount / this.itemsPerPage)
13
        }
14
    },
15
    /* eslint-disable */
16
    paginate: function ()
17
    {
18
        if (!this.articles || this.articles.length != this.articles.length)
19
        {
20
            return
21
        }
22
        this.resultCount = this.articles.length
23
        if (this.currentPage >= this.totalPages)
24
        {
25
            this.currentPage = this.totalPages
26
        }
27
        var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
28
        return this.articles.slice(index, index + this.itemsPerPage)
29
    }
30
},
31
}


Add some styling to change the color of the current page.

HTML
 




xxxxxxxxxx
1


 
1
<style lang="css">
2
.current {
3
    color: teal;
4
}
5
</style>


And that’s a wrap! After implementing this code, if you have any doubts then do not hesitate to reach us by dropping a comment below.

Vue.js

Opinions expressed by DZone contributors are their own.

Related

  • Mocking Dependencies and AI Is the Next Frontier in Vue.js Testing
  • Serving a Vue.js Application With a Go Backend
  • Build Full-Stack Web App With Firebase, Angular 15, React.js, Vue.js, and Blazor [Video]
  • React, Angular, and Vue.js: What’s the Technical Difference?

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!