请找到我尝试分页的以下代码。我有50条记录,但我不能显示10条以上的记录。而且我不知道要迭代到下10条记录直到50条记录。
render() { const per_page=10; const pages = Math.ceil(this.props.items.length / per_page); const current_page = 1; const start_offset = (current_page - 1) * per_page; let start_count =0; return (<tbody>{ this.props.items .sort((a, b) => moment(b.order_date) - moment(a.order_date) || b.order_number - a.order_number) .map((item, index) => { if (index >= start_offset && start_count < per_page) { start_count++; return <SearchResultsItem key={item.id} item={item} open={this.props.open} />; } }) } <Pagination className="items-pagination pull-right" bsSize="medium" maxButton={10} first last next prev boundaryLinks item={pages} activePage={current_page} /> </tbody> ); }
必须在handlePageChange(page)中传递页码,并且必须设置当前页面的页码(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> ); } }