Question

作为我日常工作的一部分，我的任务是在我的react应用程序中实现分页。我完成了UI和状态管理，但陷入了分页算法。我提到了下面列出的许多标准算法

问题是我们的算法稍有修改。我所做的是使用此处提到的算法-https://gist.github.com/kottenator/9d936eb3e4e3c3e02598，并使用不同的UI状态实现了基本的分页组件。（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;
  }

带省略号的分页算法

0 个答案: