Bug found in Vue.js app: search result pagination not working as expected

Question

Bug found in Vue.js app: search result pagination not working as expected

I've been developing a small frontend application that showcases a list of users in an HTML5 table using Bootstrap 3, Axios, and Vue.js 2. The user data is fetched from a JSON API and displayed in a paginated manner.

While implementing a search/filter functionality to the application, I encountered an issue with pagination not working properly for both the entire dataset and the search results. Here's a snippet of the code:

// Your Vue.js script goes here

// Your custom CSS styles go here

// Your HTML template goes here

After adding the search input field and updating the v-for loop to iterate over either displayedUsers or searchResults, I implemented the filtering logic but faced challenges in integrating pagination with search functionality. The resulting application can be accessed HERE.

If you have any advice on how to resolve this issue and make the pagination work seamlessly with search functionality, I'd appreciate your input.

javascript vue.js

Answer 1

Answer №1

To ensure the pagination functions properly alongside the filtering, it is necessary to integrate the pagination logic with the searchResults in the displayedUsers method.

displayedUsers() {
    return this.paginate(this.searchResults);
},

Subsequently, you must utilize displayedUsers throughout where a combined result is desired, such as in your template:

<tr v-for="(user, index) in displayedUsers">

Another aspect that requires correction in your code is that the page count currently always reflects the original user count, which should be updated to reflect the "current" user count:

setPages(users) {
    this.pages.length = 0; //we need to clear the previously set pages
    var numberOfPages = Math.ceil(users.length / this.perPage);
    for (var index = 1; index <= numberOfPages; index++) {
       this.pages.push(index);
    }
},

Additionally, update the pages whenever the displayedUsers are modified:

watch: {
    displayedUsers() {
        this.setPages(this.searchResults);
    }
},

If you also wish to reset the page when conducting a search, simply define the page within the searchResults method:

searchResults() {
    this.page = 1;
    return this.users.filter((user) => {
        return user.name.first.match(this.search);
      });
}

See the working example on JSFiddle.

Answer 2

To ensure the pagination functions properly alongside the filtering, it is necessary to integrate the pagination logic with the searchResults in the displayedUsers method.

displayedUsers() {
    return this.paginate(this.searchResults);
},

Subsequently, you must utilize displayedUsers throughout where a combined result is desired, such as in your template:

<tr v-for="(user, index) in displayedUsers">

Another aspect that requires correction in your code is that the page count currently always reflects the original user count, which should be updated to reflect the "current" user count:

setPages(users) {
    this.pages.length = 0; //we need to clear the previously set pages
    var numberOfPages = Math.ceil(users.length / this.perPage);
    for (var index = 1; index <= numberOfPages; index++) {
       this.pages.push(index);
    }
},

Additionally, update the pages whenever the displayedUsers are modified:

watch: {
    displayedUsers() {
        this.setPages(this.searchResults);
    }
},

If you also wish to reset the page when conducting a search, simply define the page within the searchResults method:

searchResults() {
    this.page = 1;
    return this.users.filter((user) => {
        return user.name.first.match(this.search);
      });
}

See the working example on JSFiddle.

Bug found in Vue.js app: search result pagination not working as expected

Answer №1

Similar questions

An issue with repetitive looping in eventHandler in Javascript

The process of integrating Tailwind elements into NextJs version 13

What are the semantics behind implementing Basic Authentication in AngularJS and Spring Boot?

Extract particular information from the JSON reply

Utilize Dinero.js to implement currency formatting for input fields in React applications

Axios promise handler in Vue Js is limited to processing only a single statement at a time

Is there a reason why this MD Bootstrap Snippet isn't functioning properly?

What is the best way to have one modal trigger the opening of another modal in Angular 4+

Trouble with disabling default actions and transferring text

Using Angular 2 to access information from the OpenWeather API

Use jQuery to dynamically capture and store the value of data-rowindex into an array

AngularJS Currency Converter - Converting Currencies with Ease

Is it possible to create a dynamic <hr /> using Flexbox?

vue utilize filtering to search through a nested array of objects within a parent array of objects

Updating another component when an input value changes in React

Error in setting cookies using Javascript document.cookie on iOS with cordova-plugin-ionic-webview

Obtain a socket object from the Vuex store

Matching a string with a variable in JavaScript: A simple guide

jQuery Mobile is experiencing page height inaccuracies

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the