如何动态处理分页的页码显示？ ：ReactJS

Question

我不是编码员或开发人员，但我有一个由其他人制作的网站，并且分页已经失控。

如您所见，我的导航分页上目前显示了 17 个页面，但我希望当您位于第 1 页时仅显示其中 10 个页面，当您按第 2 页时，我希望它将最大页数更改为第 11 页；当我在第 3 页时，我希望显示的最大页面为第 12 页，依此类推。

我查看了这个线程，但我仍然无法弄清楚，因为编码与我的网站使用的编码非常不同（？）

这是 .jsx 代码：

function NewsRow(props) {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchAllPosts = async () => {
      try {
        const res = await axios.get("/api")
        setPosts(res?.data);
      } catch (error) {
        console.log(error)
      }
    }

    fetchAllPosts()
  }, [posts.length])

  //save new entries when adding new post on site
  const saveNewEntryHandler = (enteredData) => setPosts(prevPosts => [enteredData, ...prevPosts])

  //PAGINATION
  const [currentPage, setCurrentPage] = useState(1)
  const recordsPerPage = 4
  const numberOfPages = Math.ceil(posts.length / recordsPerPage)
  const lastIndex = currentPage * recordsPerPage
  const firstIndex = lastIndex - recordsPerPage
  const paginatedPosts = posts.slice(firstIndex, lastIndex)
  const numbers = [...Array(numberOfPages + 1).keys()].slice(1)

  const prevPage = () => { if (currentPage !== 1) setCurrentPage(currentPage - 1) }
  const changeCurrentPage = (id) => setCurrentPage(id)
  const nextPage = () => { if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1) }


  return (
    <div className={styles.content_column} >
      <ImageCarousel />
      <Welcome />

      <NewsInput onSaveNewEntry={saveNewEntryHandler} fullList={posts} />

      {paginatedPosts.map((object) => (
        <NewsCard
          key={object.id}
          id={object.id}
          title={object.title}
          date={object.date}
          description={object.description}
          image={object.img} />
      ))}

      <Pagination>

        <PaginationItem
          className={'paginationItemStyle'}>
          <PaginationLink onClick={prevPage}>Prev</PaginationLink>
        </PaginationItem>

        {numbers.map((i, key) => (
          <PaginationItem
            key={key}
            className={'paginationItemStyle'}
            active={currentPage === i }>
            <PaginationLink onClick={() => changeCurrentPage(i)}>
              {i}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem
          className={'paginationItemStyle'}>
          <PaginationLink onClick={nextPage}>Next</PaginationLink>
        </PaginationItem>

      </Pagination>

    </div>
  )
}

export default NewsRow

这是.scss：

.paginationItemStyle {
    &.page-item {
        button {
            background-color: rgba(47, 53, 59, 0.5);
            border-color: #000000;
            color: #ffffff;
        }
        &.active, &:hover {
            button {
                background-color: rgb(47, 53, 59);
                color: rgb(34,138,252);
            }
        }
    }
}

我知道需要更改的是

const numberOfPages = Math.ceil(posts.length / recordsPerPage) 

，但我不知道我到底需要将其更改为什么，而且为我创建该网站的人也无法联系到。

非常感谢任何帮助。

我在互联网上寻找解决方案，例如这个线程，但我找不到与我自己的匹配的“代码”。

Answer 1

将您的

numbers

替换为：

    let maxElements = 10 + currentPage - 1;
    const numbers = [...Array(numberOfPages + 1).keys()]
      .slice(1)
      .slice(0, Math.min(maxElements, numberOfPages));