Алгоритм пагинации с многоточием - PullRequest
0 голосов
/ 09 апреля 2019

Как часть моей ежедневной работы, у меня была задача реализовать нумерацию страниц в моем приложении реакции. Я завершил пользовательский интерфейс и управление состоянием, но застрял в алгоритме разбиения на страницы. Я ссылался на многие стандартные алгоритмы, перечисленные ниже

  1. https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
  2. 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;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...