React.js分页-无法分页数据 [英] Reactjs Pagination - unable to paginate the data
本文介绍了React.js分页-无法分页数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请找到我尝试进行分页的以下代码.我有50条记录,但我不能显示10条以上的记录.而且我不知道要迭代到下10条记录直到50条记录.
Please find the below code that i have tried for pagination. I have 50 records but i cant able to show more than 10 records. And i dont have idea to iterate to next 10 records till 50 records.
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} );).
Have to pass the page number in the handlePageChange(page) and have to set the page number for the current 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>
);
}
}
这篇关于React.js分页-无法分页数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文