【发布时间】：2021-12-08 00:46:36
【问题描述】：
作为我日常工作的一部分，我的任务是在我的 react 应用中实现分页。我完成了 UI 和状态管理，但卡在了分页算法上。我参考了下面列出的许多标准算法
- https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
- https://flaviusmatis.github.io/simplePagination.js
问题是我们的算法稍作修改。我所做的是使用这里提到的算法 - https://gist.github.com/kottenator/9d936eb3e4e3c3e02598 并实现了具有不同 UI 状态的基本分页组件。 (If array[i] === selectedPageFromProps, then highlight that page with different colour)
这个算法的作用是将 selectedPage 和 totalNumberOfPages 作为参数，并返回一个带有省略号的所有页面的数组（如果有更多页面）
function pagination(selectedPage, totalPages) {return arrayOfPageNumbers with Ellipsis(if required)}
算法应根据设备返回不同的值 - 在移动设备中，我们最多显示 4 个数字，在桌面设备中，我们最多显示 7 个页面。
下面提到的该算法的不同返回值。
In Mobile - Max number of pages to be displayed is 4
*****************************************************
pagination(1,4) : 1,2,3,4
pagination(2,4) : 1,2,3,4
pagination(3,4) : 1,2,3,4
pagination(4,4) : 1,2,3,4
If totalPages > 4
pagination(1,99) : 1,2,3,...,99
pagination(2,99) : 1,2,3,...,99
pagination(3,99) : 1,...,3,...,99
pagination(4,99) : 1,...,4,...,99
pagination(5,99) : 1,...,5,...,99
pagination(97,99) : 1,...,97,...99
pagination(98,99) : 1,...,98,...99
pagination(99,99) : 1,...,98,99
In Desktop/Tablet - Max number of pages to be displayed is 7
************************************************************
pagination(1,7) : 1,2,3,4,5,6,7
pagination(2,7) : 1,2,3,4,5,6,7
pagination(7,7) : 1,2,3,4,5,6,7
If totalPages > 7
pagination(1,99) : 1,2,3,4,5,6,...,99
pagination(2,99) : 1,2,3,4,5,6,...,99
pagination(4,99) : 1,2,3,4,5,6,...,99
pagination(5,99) : 1,...,3,4,5,6,7,...,99
pagination(95,99) : 1,...,93,94,95,96,97,...,99
pagination(96,99) : 1,...,94,95,96,97,98,...,99
pagination(97,99) : 1,...,95,96,97,98,99
pagination(98,99) : 1,...,95,96,97,98,99
pagination(99,99) : 1,...,95,96,97,98,99
有人可以帮我修改或实现新算法吗？
目前我正在使用下面提到的算法。
function pagination(currentPage, nrOfPages, deltaValue) {
var delta = deltaValue,
range = [],
rangeWithDots = [],
l;
range.push(1);
if (nrOfPages <= 1) {
return range;
}
for (let i = currentPage - delta; i <= currentPage + delta; i++) {
if (i < nrOfPages && i > 1) {
range.push(i);
}
}
range.push(nrOfPages);
for (let i of range) {
if (l) {
if (i - l === 2) {
rangeWithDots.push(l + 1);
} else if (i - l !== 1) {
rangeWithDots.push("...");
}
}
rangeWithDots.push(i);
l = i;
}
return rangeWithDots;
}
【问题讨论】：
-
有四种情况：无省略号、左侧省略号、右侧省略号、左右省略号。所以代码需要决定适用哪种情况，然后为每种情况生成适当的输出。
-
我找到的关于堆栈溢出的最佳解释stackoverflow.com/a/56671681/14204424
标签： javascript reactjs algorithm pagination