如何在 node.js 中的某些数字后显示分页点点并做出反应

Question

我想显示像 1,2,3 ... 56, 57 这样压缩的页码，请查看我当前情况的附加屏幕截图以及我的期望

下面是我的 API 代码和前端代码，已经完成了图片展示。

// Backend

const totalPages = Math.ceil(totalPages / limit);
res.send({
  posts,
  totalPages,
});

// Output

totalPages = 107;
posts = 2140;

// Frontend

const pager = () => {
  const paginate = [];
  for (let i = 1; i <= totalPages; i++) {
    // console.log('000')
    paginate.push(
      <Link href={`?page=${i}`} key={i}>
        <a>{i}</a>
      </Link>
    );
  }
  return paginate;
};

我想我可以解释一下我想要什么，但如果您有任何疑问，请在评论中告诉我。

提前致谢。

根据回答更新

请看这个截图，在 3 之后应该是 4, 5 然后是 ... 等等。

基于@Andy

Answer 1

if( totalPages <5){
    for(let i = 1; i <= totalPages; i++){
        // console.log('000')
        paginate.push(
            <Link href={`?page=${i}`} key={i}>
                <a>
                    {i}
                </a>
            </Link>
        )}
} else {
 for(let i = 1; i <= 3; i++){
        // console.log('000')
        paginate.push(
            <Link href={`?page=${i}`} key={i}>
                <a>
                    {i}
                </a>
            </Link>
        )}
    paginate.push("...",
<Link href={`?page=${totalPages}`} key={totalPages}>
                <a>
                    {totalPages}
                </a>
            </Link>
)
}

将其分解为 2 个部分。超过 5 个和 5 个以下。如果少于 5 个，请显示它们 all.If 如果您有更多，请显示其中的 3 个，然后是一串 ...，然后是最后的最后一项。您可以根据需要更改数字。

Answer 2

你的 for 循环

for (let i = 1; i <= totalPages; i++) {
    // console.log('000')
    if(i===4 && totalPages>7){
        paginate.push(
            <a>...</a>
        );
        i = totalPages-3;
    }
    paginate.push(
      <Link href={`?page=${i}`} key={i}>
        <a>{i}</a>
      </Link>
    );
  }

Answer 3

只需相应地设置您的条件即可。为了获得更好的导航体验，您可能还应该考虑当前页面，并至少将其前后的页面添加到您的导航中。喜欢1 2 3 ... 56 57 58 ... 100 101 102

const pager = () => {
  let pagination = [], i = 1;
  
  while (i <= totalPages) {
    if (i <= 3 || //the first three pages
        i >= totalPages - 2 || //the last three pages
        i >= currentPage - 1 && i <= currentPage + 1) { //the currentPage, the page before and after
      pagination.push(
        <Link href={`?page=${i}`} key={i}> 
          <a>{i}</a> 
        </Link>
      );
      i++;
    } else { //any other page should be represented by ...
      pagination.push(<div>...</div>);
      //jump to the next page to be linked in the navigation
      i = i < currentPage ? currentPage - 1 : totalPages - 2;
    }
  }
  return pagination;
}

Answer 4

与其遍历 totalPages 的整个 n，不如分阶段进行。首先使用 for...loop 获取第一页链接，然后应用点，然后使用类似的循环获取最后一页链接。

此示例使用 Paginator 组件来封装代码，然后您可以将代码导入到需要它的组件中。

function Paginator({ totalPages }) {

  const pagination = [];

  function createLink(i) {
    const page = `?page=${i}`;
    return (
      <div className="page">
        <a href={page} key={i}>{i}</a>
      </div>
    );
  }

  function createDots() {
    return <div className="page">...</div>;
  }

  // If there are no pages return a message
  if (!totalPages) return <div>No pages</div>;

  // If totalPages is less than seven, iterate
  // over that number and return the page links
  if (totalPages < 7) {
    for (let i = 1; i <= totalPages; i++) {
      pagination.push(createLink(i));
    }
    return pagination;
  }

  // Otherwise create the first three page links
  for (let i = 1; i <= 3; i++) {
    pagination.push(createLink(i));
  }

  // Create the dots
  pagination.push(createDots());

  // Last three page links
  for (let i = totalPages - 2; i <= totalPages; i++) {
    pagination.push(createLink(i));
  }

  return pagination;

}

function Example() {

  // Sample array of possible totalPages
  // Run the snippet again to see the change in output
  const arr = [0, 10, 107, 50, 100, 200, 1000, 45, 9, 3];

  // Pick a total
  const totalPages = arr[Math.floor(Math.random() * arr.length)];

  return <Paginator totalPages={totalPages} />;
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

.page { display: inline-block; padding: 0.5em; margin-left: 0.2em; border: 1px solid #666666; }
.page a { color: black; text-decoration: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 5

我认为如果你尝试使用 NPM 包会更容易，因为你已经完全完成了后端，对于前端，你可以像下面这样尝试 link

NPM next-pagination

演示是here

代码示例如下

import React, { Component } from 'react'

import Pagination from 'next-pagination'

class Example extends Component {
    render() {
        return <Pagination total={1000} />
    }
}

输出为

顺便说一下，您可以访问包管理器 link 了解完整详情。

我认为这可能有帮助。

如何在 node.js 中的某些数字后显示分页点点并做出反应

How to show pagination dot dot after certain numbers in node.js & react

javascript

pagination

node.js

reactjs