如果每頁的項目數變為較小的數字，如何計算當前頁？

Question

我有以下問題 - 我有一個分頁，它顯示了您正在查看的記錄的哪一部分。

例如：

項目總數： 100
每頁可能的項目： 10、25

如果我將每頁的項目設置為10並將 go 設置為第六頁，這將為我提供以下信息：

51-60/100
  *   *
  |   |--------- Total records
  | 
  |-------- Displayed range of records

如果將每頁的頁面項目更改為25 ，它將設置為51-75/100 。 但是，如果我將其設置回10 ，它將顯示我71-80 。

不知何故，這感覺像是一種奇怪的行為，我敢肯定，我提出的計算是錯誤的。 我認為，正確的結果應該是51-60 ->（設置為每頁25個）-> 51-75 ->（設置為每頁10個）-> 51-60

這是我的代碼：

itemsPerPageChanged(newItemsPerPage) {
    // On every change of the items per page the total amount of pages changes
    this.totalPages = Math.ceil(this.totalItems / newItemsPerPage);

    // Here I calculate the current page depending on the itemsPerPage size
    this.page = Math.ceil((this.itemsPerPage * this.page) / newItemsPerPage);

    // If the current page is bigger than total possible pages the ceil went to far and we take the last possible page as current page
    if (this.page > this.totalPages) this.page = this.totalPages;

    this.itemsPerPage = newItemsPerPage;
    this.getItems();
},

什么是正確的公式？ 我現在無法理解它。 :(

Answer 1

如果您有第一頁的編號 1，則應按以下方式計算頁面：

const pageFirstItemIndex = this.itemsPerPage * (this.page - 1) + 1;
this.page = Math.ceil(pageFirstItemIndex / newItemsPerPage);

和

displayedRangeOfRecords = `${itemsPerPage * (page - 1) + 1}-${itemsPerPage * page}`;

Answer 2

我試過你的代碼示例，它對我有用，如果

displayedRangeOfRecords = `${this.itemsPerPage * this.page + 1}-${this.itemsPerPage * (this.page + 1)}`;

PS L=10 和 P=5 映射到 L=25 和 P=2（不是 P=3）