与兄弟姐妹建立分页项目

Question

我正在尝试创建一个返回分页项的函数，这是我尝试过的（基于https://github.com/mui/material-ui/blob/v4.10.2/packages/material-ui-lab/src/Pagination/usePagination.js）：

const pagination = (totalPages, siblingCount = 2, pageNumber) => {
  const ELLIPSIS = '…';
  const siblingsStart = Math.max(
      Math.min(
        // Natural start
        pageNumber - siblingCount,
        // Lower boundary when page is high
        totalPages - siblingCount * 2 - 2,
      ),
      // Greater than startPage
      3,
    );

    const siblingsEnd = Math.min(
      Math.max(
        // Natural end
        pageNumber + siblingCount,
        // Upper boundary when page is low
        siblingCount * 2 + 3,
      ),
      // Less than endPages
      totalPages - 2,
    );

    // Basic list of items to render
    return [
      1,

      // Start ellipsis
      // eslint-disable-next-line no-nested-ternary
      ...(siblingsStart > 3
        ? [ELLIPSIS]
        : totalPages - 1 > 2
        ? [2]
        : []),

      // Sibling pages
      ...range(siblingsStart, siblingsEnd),

      // End ellipsis
      // eslint-disable-next-line no-nested-ternary
      ...(siblingsEnd < totalPages - 2
        ? [ELLIPSIS]
        : totalPages - 1 > 1
        ? [totalPages - 1]
        : []),

      totalPages,
    ];
};

当（例如）pageNumber = 6 和totalPages = 20 时，此函数将返回如下字符串：

1 … 4 5 6 7 8 … 20

这很好，因为我想始终在 pageNumber 之前和之后显示两个数字。

所以当pageNumber = 1 我想要以下：

1 2 3 … 20

但是我得到了这个：

1 2 3 4 5 6 7 … 20

和pageNumber = 20的时候一样，我想得到这个：

1 … 18 19 20

我该如何解决这个问题？

Answer 1

问题中提供的代码中有硬编码的最低和最高可能同级页面。例如，确定siblingsStart 值（用于开始兄弟页面（中间部分的页面列表））的代码永远不会少于三个：

const siblingsStart = Math.max( ... , 3); // <-- lowest value returnable is 3

所以任何小于 6 的当前页面值，给定当前页面之前的 2 个兄弟值，将返回 1 2 3 4 5 6 ...，因为页面列表总是以 1 开头，siblingCount 是 2，并且3 被硬编码为最低同级页码：1 + 2 + 3 = 6。

---

从空白开始... first 检查当前页面是否接近第一页，如果不是，则将第一页加省略号添加到字符串中。 下一页 在当前页面之前开始循环并循环兄弟页面的数量，确保不要在第一页之前，将每个页面添加到字符串中。 之后从当前页面开始并向前循环兄弟计数，确保不超过总页面。并且最后添加最后一页，如果它不是太靠近当前页面。

const pagination = (pageNumber, totalPages = 40, siblingCount = 2) => {
      let pagination_str = "";

      // add first page if current page is not too close
      if ( 1 < pageNumber - siblingCount ) { 
          pagination_str += "1 ";
          if ( siblingCount + 3 < pageNumber ) { pagination_str += "… "; }
          else if ( siblingCount + 2 < pageNumber ) { pagination_str += "2 "; }
      }

      // get siblingCount before
      for ( 
          // is current page to close to first page?
          let ii = (0 < (pageNumber - siblingCount)? pageNumber - siblingCount: 1); 
          ii < (pageNumber); 
          ii++ 
      ) {
          pagination_str += ii + " ";
      }

      // get siblingCount after
      for ( 
          let ii = pageNumber;
          // is end of increment greater than or equal to the total number of pages?
          ii <= ((totalPages >= pageNumber + siblingCount)? (pageNumber + siblingCount): totalPages); 
          ii++ 
      ) {
          pagination_str += ii + " ";
      }

      // add last page if current page is not too close
      if ( totalPages > pageNumber + siblingCount ) { 
          if ( totalPages - siblingCount - 2 > pageNumber ) { pagination_str += "… "; }
          else if ( totalPages - siblingCount - 1 > pageNumber ) { pagination_str += (totalPages - 1) + " "; }
          pagination_str += totalPages; 
      }
  
      return pagination_str;
};

console.log("page 1 of 7: ", pagination(1, 7));
console.log("page 5 of 7: ", pagination(5, 7));
console.log("page 6 of 7: ", pagination(6, 7));
console.log("page 5: ", pagination(5, 20));
console.log("page 6: ", pagination(6, 20));
console.log("page 20: ", pagination(20, 20));