Блог

У меня есть базовые компоненты с рабочей разбивкой на страницы, отображающие реквизиты в таблице.

Однако это показывает все номера страниц, что не идеально, я бы хотел, чтобы были видны только некоторые из них.

например, 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
}
  

Я попробовал несколько разных подходов, но все они не достигли того, чего я хотел бы.

Спасибо за вашу помощь 🙂

Просто проверьте, соответствует ли индекс 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);
}
  

Лучшим способом было бы перебирать номера страниц, используя счетчик, который дает метод 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 }
  

Затем вы можете продолжить и проверить длину количества страниц, если создатель, чем кнопка, которую вы создали, добавляет следующую кнопку

Вы должны обновить текущую страницу до состояния, затем проверить текущую страницу, если это первый элемент в yhe номера страниц, иначе добавить предыдущую кнопку