[英]How to calculate the current page if the items per page changes to a smaller number?
I have the following issue - I have a pagination, that shows which part of the records you are looking at.我有以下问题 - 我有一个分页,它显示了您正在查看的记录的哪一部分。
For example:例如:
Total Items: 100项目总数: 100
Possible Items per Page: 10, 25每页可能的项目: 10、25
If I set the items per page to 10
and go to page six this will get me the following:如果我将每页的项目设置为
10
并将 go 设置为第六页,这将为我提供以下信息:
51-60/100
* *
| |--------- Total records
|
|-------- Displayed range of records
If change the page items per page to 25
it will be set to 51-75/100
.如果将每页的页面项目更改为
25
,它将设置为51-75/100
。 But if I set it back to 10
it will display me 71-80
.但是,如果我将其设置回
10
,它将显示我71-80
。
It somehow feels like a weird behaviour, and I am sure, that the calculation that I came up with is faulty.不知何故,这感觉像是一种奇怪的行为,我敢肯定,我提出的计算是错误的。 I would think, that the right result should be
51-60
-> (set to 25
per Page) -> 51-75
-> (set to 10
per Page) -> 51-60
我认为,正确的结果应该是
51-60
->(设置为每页25
个)-> 51-75
->(设置为每页10
个)-> 51-60
Here is my code:这是我的代码:
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();
},
What is the right formula?什么是正确的公式? I just can't get my head around it right now.
我现在无法理解它。 :(
:(
If you have first page's number 1, you should calculate page in the following way:如果您有第一页的编号 1,则应按以下方式计算页面:
const pageFirstItemIndex = this.itemsPerPage * (this.page - 1) + 1;
this.page = Math.ceil(pageFirstItemIndex / newItemsPerPage);
and和
displayedRangeOfRecords = `${itemsPerPage * (page - 1) + 1}-${itemsPerPage * page}`;
I tried your code sample and it works for me, if我试过你的代码示例,它对我有用,如果
displayedRangeOfRecords = `${this.itemsPerPage * this.page + 1}-${this.itemsPerPage * (this.page + 1)}`;
PS L=10 and P=5 maps to L=25 and P=2 (not P=3) PS L=10 和 P=5 映射到 L=25 和 P=2(不是 P=3)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.