我试图在reactjs应用程序中进行分页。请找到以下代码。
最后我无法呈现列表。它给出了空白列表。有人可以帮我解决这里的错误。?
请找到完整的代码。从渲染列表和分页组件的位置添加了组件,仅在此类中添加。
请在下面找到演示数据。数据来自mongodb作为JSON对象。
return (
<table className="table table-hover" style={{
minWidth: 600,
}} >
<thead >
<tr>
<th>Order Number</th>
<th>Customer Name</th>
<th>Created By</th>
</tr>
</thead>
<SearchResultsList items={ this.props.results } open={ this.props.open } />
</table>
);
}
}
class SearchResultsList extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
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++;
<SearchResultsItem key={ item.id } item={ item } open={ this.props.open } />
}
})
}
</tbody>
);
<Pagination
className="items-pagination pull-right"
bsSize="medium"
maxButton={10}
first last next prev boundaryLinks
item={pages}
activePage={current_page} />
}
class SearchResultsItem extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.state = { };
}
handleInputChange(e) {
const target = e.target;
const name = target.name;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({ [name]: value });
}
render() {
return(
<tr style={{fontsize: '10',cursor: 'pointer'}}
<td>{ this.props.item.order_number }</td>
<td>{ this.props.item.customer_name }</td>
<td>{ this.props.item.buyer_name }</td>
</tr>
);
}
}
请找到演示数据:
{
"_id" : "658ecv57b-3853-46f4-af6c-cb1ca111137f",
"order_number" : "1000123",
"customer_name" : "rahul",
"buyer_name" : "rahul",
}
{
"_id" : "1258ecv57b-3853-46f4-af6c-cb1ca111137f",
"order_number" : "1000123",
"customer_name" : "Bruce",
"buyer_name" : "Bruce",
}
{
"_id" : "658ecv57b-3853-46f4-af6c-cb1ca1111312f",
"order_number" : "1000123",
"customer_name" : "mike",
"buyer_name" : "mike",
}
{
"_id" : "658ecv57b-3853-46f4-af6c-cb112111137f",
"order_number" : "1000123",
"customer_name" : "linda",
"buyer_name" : "linda",
}
由于