Bootstrap's Paginierung - kann nicht zur vorherigen Seite navigieren (reactjs)

Question

Ich habe Bootstrap's Paginierung in meiner reactjs Anwendung implementiert. Ich kann zur nächsten Seite navigieren, kann jedoch nicht zu vorherigen Seiten navigieren. Wenn Sie auf die vorherige Seite klicken, wird nur zur nächsten Seite navigiert.

Abgesehen von dieser vorherigen Seitenausgabe funktioniert die restliche Funktionalität wie die Paginierungslogik.

Könnten Sie mir bitte auf die gleiche Weise helfen.

Hier finden Sie meinen Code unten.

class SearchResults extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { }; 
    this.handlePageChange=this.handlePageChange.bind(this); 
    } 

    getNumPages(currentPage) { 
    { this.handlePageChange } 
     this.setState({ 
     per_page: this.props.results , 
     currentPage: currentPage + 1 , 
     previousPage: currentPage - 1 
     }); 
    } 

    handlePageChange(page, evt) { 
    const currentPage = this.state.currentPage || 1; 
    const numPages = this.getNumPages(); 
    const pageLinks = []; 
    if (currentPage > 1) { 
    if (currentPage > 2) { 
     pageLinks.push(1); 
     pageLinks.push(' '); 
    } 
     pageLinks.push(currentPage - 1); 
     pageLinks.push(' '); 
    } 
    for (let i = 1; i <= numPages; i++) { 
     const page = i; 
     pageLinks.push(page); 
    } 
    if (currentPage < numPages) { 
     pageLinks.push(' '); 
     pageLinks.push(currentPage + 1); 
     if (currentPage < numPages - 1) { 
     pageLinks.push(' '); 
     pageLinks.push(numPages); 
     } 
    } 
    this.setState({ currentPage: currentPage + 1 }); 
    this.setState({ previousPage: currentPage - 1 }); 
    } 

    render() { 
    const per_page = "10"; 
    const paginationData = this.props.results; 
    let numPages = Math.ceil(paginationData.length/per_page); 
    if (paginationData.length % per_page > 0) { 
     numPages++; 
    } 
    return (
     <div className="panel panel-primary"> 
     <div className="panel-heading">ORDERS LIST</div> 
     <table className="table table-hover" }} > 
      <thead > 
      <tr> 
       <th>Customer Name</th> 
       <th>Assignee</th> 
       <th>Status</th> 
       <th>Creation Date </th> 
      </tr> 
      </thead> 
      <SearchResultsList items={ this.props.results } open={ this.props.open } 
      current_Page={ this.state.currentPage } /> 
     </table> 

     <Pagination id="content" className="users-pagination pull-right" 
     bsSize="medium" 
     first last next prev boundaryLinks items={numPages} 
     activePage={ this.state.currentPage } onSelect={ this.handlePageChange } /> 
     </div> 
    ); 
    } 
} 

Answer 1

Hier finden Sie den Arbeitscode.

müssen die Seitenzahl in der handlePageChange (Seite) übergeben und müssen die Seitennummer für die aktuelle Seite (this.setState ({currentPage: page});).

class SearchResults extends React.Component { 
constructor(props) { 
super(props); 
this.state = { }; 
} 

handlePageChange(page) { 
this.setState({ currentPage: page }); 
} 

render() { 
    return (
    <div className="panel panel-primary"> 
    <div className="panel-heading">ORDERS LIST</div> 
    <table className="table table-hover" }} > 
     <thead > 
     <tr> 
      <th>Customer Name</th> 
      <th>Assignee</th> 
      <th>Status</th> 
      <th>Creation Date </th> 
     </tr> 
     </thead> 
     <SearchResultsList items={ this.props.results } open={ this.props.open 
    } 
     current_Page={ this.state.currentPage } /> 
    </table> 

    <Pagination id="content" className="users-pagination pull-right" 
    bsSize="medium" 
    first last next prev boundaryLinks items={numPages} 
    activePage={ this.state.currentPage } onSelect={ this.handlePageChange } 
    /> 
    </div> 
    ); 
    } 
}