在 Reactjs 中从分页中隐藏页码答案

【问题标题】：Hiding page numbers from pagination in Reactjs在 Reactjs 中从分页中隐藏页码
【发布时间】：2020-11-03 12:37:33
【问题描述】：

我有一个基本组件，可以在表格中显示道具的工作分页。

然而，这显示了所有不理想的页码，我只希望看到一些。

例如 1-2-3-4-5-20，这样它就不会占用太多空间。

这是组件本身。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

class AllAlerts extends Component {
  state = {
    currentPage: 1,
    alertsPerPage: 8,
  };

  componentDidMount() {}

  handleClick(number) {
    this.setState({
      currentPage: number,
    });
  }

  render() {
    // Logic for displaying alerts
    const { currentPage, alertsPerPage } = this.state;
    const indexOfLastAlerts = currentPage * alertsPerPage;
    const indexOfFirstAlerts = indexOfLastAlerts - alertsPerPage;
    const currentAlerts = this.props.alerts.slice(indexOfFirstAlerts, indexOfLastAlerts);

    const renderAlerts = currentAlerts.map((alerts, index) => {
      return (
        <li key={index}>
          <div>
            All Title {alerts.title}
            <li>All ID {alerts.id}</li>
            <li>All user Id {alerts.userId}</li>
          </div>
        </li>
      );
    });
    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(this.props.alerts.length / alertsPerPage); i++) {
      pageNumbers.push(i);
    }
    const renderPageNumbers = pageNumbers.map((number) => {
      return (
        <button key={number} id={number} onClick={() => this.handleClick(number)}>
          {number}
        </button>
      );
    });

    return (
      <>
        <>All Alerts</>
        <br />

        <form class="example" action="/action_page.php">
          <input type="text" placeholder="Search.." name="search" />
          <button type="submit">
            <i class="fa fa-search"></i>
          </button>
        </form>

        <>{renderAlerts}</>
        <>{renderPageNumbers}</>
      </>
    );
  }
}

export default AllAlerts;

据我了解，我会在这部分代码中进行更改。

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(this.props.alerts.length / alertsPerPage); i++) {
  pageNumbers.push(i);
  //Only push 1-5 and last which has to change depending on page number
}

我尝试了几种不同的方法，但都没有达到我想要的效果。

感谢您的帮助:)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

只需检查循环的索引i 是否符合您的条件

const pageNumbers = [];
const numPages = Math.ceil(this.props.alerts.length / alertsPerPage);
for (let i = 1; i <= numPages; i++) {
  //Only push 1-5 and last which has to change depending on page number
  if (i <= 5 || i == numPages)
    pageNumbers.push(i);
}

但可能你应该显示当前页面和之前和之后的页面，否则你将无法跳转到下一页或上一页

const pageNumbers = [];
const numPages = Math.ceil(this.props.alerts.length / alertsPerPage);
for (let i = 1; i <= numPages; i++) {
  if (i <= 5 || //the first five pages
      i == numPages || //the last page
      Math.abs(currentPage - i) <= 1 //the current page and the one before and after
     )
    pageNumbers.push(i);
}

【讨论】：

【解决方案2】：

最好的方法是遍历页码，使用 react map 方法提供的计数器，您可以检查您创建了多少个按钮，当超过五个时您停止创建按钮

{
  pageNumbers.map((number,count)=>
 count <5?
 <button
      key={number}
      id={number}
      onClick={() =>this.handleClick(number)}
    >
      {number}
    </button>:
 null
 )
}




{pageNumbers.length >5? //next button here : null }

然后您可以继续检查页数的长度，如果创建者比您创建的按钮添加了下一个按钮

您应该更新当前页面状态然后检查当前页面是否是页码中的第一个元素，否则添加上一个按钮

【讨论】：