Как часть моей ежедневной работы, у меня была задача реализовать нумерацию страниц в моем приложении реакции. Я завершил пользовательский интерфейс и управление состоянием, но застрял в алгоритме разбиения на страницы. Я ссылался на многие стандартные алгоритмы, перечисленные ниже
- https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
- https://flaviusmatis.github.io/simplePagination.js
Проблема в нашем слегка измененном алгоритме. Я использовал алгоритм, упомянутый здесь - https://gist.github.com/kottenator/9d936eb3e4e3c3e02598, и реализовал базовый компонент разбиения на страницы с различными состояниями пользовательского интерфейса. (If array[i] === selectedPageFromProps, then highlight that page with different colour
)
Что делает этот алгоритм, так это примет selectedPage и totalNumberOfPages в качестве аргумента и вернет массив всех страниц с многоточием (если есть больше страниц)
функция разбивки на страницы (selectedPage, totalPages) {вернуть arrayOfPageNumbers с многоточием (если требуется)}
Алгоритм должен возвращать разные значения в зависимости от устройства - в мобильном телефоне мы показываем максимум 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;
}