reactjs - How to display 5 page number by default in react

Question

I have got series of data that contains some objects in one array(json file) and it will be shown by react.There is a paging which displays all the pages. I want to show only 5 pages by default and when the user click next button the next page (number =6) will be shown. But now when the user is in page (number 5) and click next button nothing happens and we are in page number 5 yet.

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: [],
      .
      .
      .
      currentPage: 1,
      itemsPerPage: 25,
      startIndex : 0,
      endIndex : 5,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    const { data, currentPage, itemsPerPage,startIndex,endIndex } = this.state;
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
    const renderHotel = currentItems.sort((a, b) => a.total - b.total)
    .map((item, i) => {
      return  <div class="item">
                <span> {item.name}</span>
              </div>
    });
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
      pageNumbers.push(i);
    }
    const renderPageNumbers = pageNumbers.slice(startIndex, endIndex)
    .map(number => {
      return (
        <li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'}
          key={number}
          id={number}
          onClick={this.handleClick}>
          {number}
        </li>
      );
    });
    return (
      <div>
        {renderHotel}
        <ul id="page-numbers" class="pagenumDef">
          <li onClick={this.decremant}><span>prev</span></li>
          {renderPageNumbers}
          <li onClick={this.increment}><span>next</span></li>
        </ul>
      </div>
    )
  };

  increment=(event)=> {
    if(this.state.currentPage < this.state.data.length /this.state.itemsPerPage){
      this.setState({
        currentPage: this.state.currentPage+1
      });
    }
  }

  decremant=(event)=> {
    if(this.state.currentPage >1){
      this.setState({
      currentPage: this.state.currentPage-1
    });
  }}
}
ReactDOM.render(<App/>, document.getElementById('Result'));

标签： reactjs

Answer 1

Where is logic for startIndex and endIndex? I think this could help you:

increment = event => {
  if (
    this.state.currentPage <
    this.state.data.length / this.state.itemsPerPage
  ) {
    if (this.state.currentPage === this.state.endIndex) {
      this.setState({
        endIndex: this.state.endIndex + 1,
        startIndex: this.state.startIndex + 1
      });
    }

    this.setState({
      currentPage: this.state.currentPage + 1
    });
  }
};

decremant = event => {
  if (this.state.currentPage > 1) {
    if (this.state.currentPage === this.state.startIndex + 1) {
      this.setState({
        endIndex: this.state.endIndex - 1,
        startIndex: this.state.startIndex - 1
      });
    }

    this.setState({
      currentPage: this.state.currentPage - 1
    });
  }
};

Code Sansbox: https://codesandbox.io/s/on911vv05