I'm having trouble with my pagination controls not correctly displaying the next and previous indices. What adjustments should I make to fix this issue?

When a record is clicked in my code, the details are displayed. Within this details section, there are 2 links (previous, next) that allow navigation to the previous and next records. The issue arises when navigating to the next page from pagination – upon clicking on previous or next, it continues to reference the first page's row index instead of the selected row.

To see the problem in action, please visit:

    nextRecord() {
    let next = (this.currentIndex += 1);
    if (next > this.allUserTableData.length - 1) {
      this.currentIndex = 1;
      return;
    }
    let nextRecord = this.allUserTableData[next];
    this.userObj = nextRecord;
    console.log(nextRecord, next);
  }
  previousRecord() {
    let next = (this.currentIndex -= 1);
    if (next < 0) {
      this.currentIndex = 0;
      return;
    }
    let nextRecord = this.allUserTableData[next];
    this.userObj = nextRecord;
    console.log(nextRecord, next);
  }

<button (click)="previousRecord()">Previous</button> | <button (click)="nextRecord()">Next</button>

Answer №1

Check out a functional example by following this StackBlitz Link

I've introduced a new parameter within the viewuser() function

<tr class="record-row" (click)="viewUser(user, i, filteredUsers, 5, page)"

and within viewUser()

viewUser(user: any, index, filterData, itemsPerPage, currentPage) {
  console.log(itemsPerPage, currentPage);
  let currentPageIndex = currentPage;
  let recordPerPageToShow = itemsPerPage;

  let findCurrentRecordToSkip = (currentPageIndex - 1) * recordPerPageToShow;
  let countIndex = findCurrentRecordToSkip + recordPerPageToShow;

  console.log(
  "filter-pagination",
  filterData.slice(findCurrentRecordToSkip, countIndex)
  );

 this.isView = true;
 console.log(user, index, filterData);
 this.userObj = user;
 this.currentIndex = index;
 this.allUserTableData = filterData.slice(
  findCurrentRecordToSkip,
  countIndex
 );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize a Chrome extension to emphasize text within a contenteditable element by underlining it

I am in the process of developing a Chrome extension that highlights specific words when a user types them. For example, if a user inputs "hello," I want to highlight or underline it. The challenge arises when dealing with content editable divs in platform ...

Formatting strings with positive or negative numbers can be achieved using Utilities.formatString

Looking to enhance the visual representation of numeric string data by displaying it in different colors based on whether the number is positive or negative. Current code snippet: var url = 'https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxx ...

Transitioning between different hues using specific fraction values

On my website, there is a variable called 'x' which represents a percentage. I am looking for a way to assign colors based on this percentage - with 0% being red and 100% being blue. For example, if 'x' is 50%, the color should be a mix ...

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

Performing asynchronous updates with AJAX in combination with ASP to display updated progress panels can be achieved

I am currently delving into the realm of AJAX alongside Classic ASP for the very first time. Within my AJAX script, I'm calling an ASP page (process.asp) that contains a simple loop iterating from 1 to 1000. This loop mimics an image processing task ...

The lack of definition for e.PreventDefault causes an error

In my code, I have a registerAjax(e) function: function registerAjax(e) { e.preventDefault(); let userData = { username: $("#username").val(), password: $("#password").val(), }; $.ajax({ method: "POST", url: kinveyBaseUrl + "user/" + kinve ...

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

I'd like to implement a retry mechanism for an observable chain with a delay of 2 seconds. While researching, I found some solutions using retryWhen. However, it appears that retryWhen is deprecated and I prefer not to use it. The retry with delay s ...

Insert information into an array within a mongoDB structure using the Mongoose library

Is it possible to add elements into an array in a mongoDB schema? For instance, in the given schema: var ProviderSchema = new Schema({ keyWords: [String] }); How can I insert data into the keyWords field using the specified route: app.put(&a ...

Transitioning from Three.js's CanvasRenderer to WebGLRenderer is a significant upgrade

Can a Three.js script created with CanvasRenderer be easily converted to use WebGLRenderer instead, and if yes, what is the process for doing so? ...

React - Issues with setTimeout() method not triggering following Promise.all execution

I am facing an issue with my arrow function that is called from the `componentDidMount` lifecycle method to fetch updated status of schedules every 20 seconds using a `setTimeout()`. The problem is that the `setTimeout()` method does not trigger another re ...

Implementing multiple condition-based filtering in React Native for arrays

I am looking to apply multiple filters to an array based on certain conditions defined by toggling switches. The issue arises when toggling two or more switches simultaneously, resulting in an empty array. My goal is to retrieve an array containing the tru ...

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Need help with a renderWorkoutUpdated function that replaces specific workout records with updated values. _renderWorkoutUpdated(currentWorkout) { let html = `<li class="workout workout--${currentWorkout.type}" data-id="${ curre ...

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

What is the best way to use canvas to precisely draw a line on the display at specific absolute coordinates?

As a newcomer to working with canvas and SVG, I am trying to create a line between two specific coordinates. For example, if I have two rectangles, I need to draw a line connecting their centers: https://i.sstatic.net/Rc6qA.png Here is what I have tried ...

Guide on loading '.obj' files with multiple '.mtl' files using Three.js

I am attempting to load the cube.obj file which references multiple cube_*.mtl files, each of which utilize texture images in the format *.png. The resources can be found here. My goal is to dynamically load objects with the same geometry but different mat ...

Differences between Typescript compilation: Using dot notation vs square brackets when accessing non-existent properties

Imagine having the given class and code snippet: class myClass{ x: number; } const obj = new myClass(); obj.y = 7; // produces a compile error. Property 'y' does not exist on type myClass. obj['y'] = 7; // compiles without any issu ...

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

const handleClick = () => { if (!activated) { if (inputValue == '') { return } if (!isNodeInGraph(graph, inputValue)) { return } } setActiv ...

What could be causing the issue in my Angular code with Module Federation and Micro front-end? I'm encountering a Typescript error stating that the container is undefined

I am currently working with two separate Angular applications: app1 = parentApp (the main shell application), running on port 4200 app2 = childApp (the micro front-end I want to integrate into parentApp), running on port 4201 I aim to ...

Utilizing vue.js 3 to implement dual @click events on a single HTML element

I need to assign 2 mouse click events to a div element. One should be triggered by holding down the shift key while clicking, and the other by a regular click, like this: <div @click.shift="aaa()" @click="bbb()">...</div> T ...