Why my next and previous control not able to take the correct index when paginating? What changes do I need to make?

风格不统一 提交于 2021-01-29 19:56:25

问题


In my code when you click on any of the record you will see the details. In the details there are 2 links (previous, next) to navigate to previous n next record. On the first page it is working fine. But when I navigate to next page from pagination and click on previous n next it still taking the first page row index and previous n next is happening from the row instead of select row.

You can view here: https://angular-ivy-hkrfyu.stackblitz.io/

    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>

回答1:


find working example here in this StackBlitz Link

I have added new parameter inside viewuser()

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

and inside 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
 );
}


来源:https://stackoverflow.com/questions/65698330/why-my-next-and-previous-control-not-able-to-take-the-correct-index-when-paginat

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!