reactjs分页与来自mongodb的json数据答案

【问题标题】：reactjs pagination with json data from mongodbreactjs分页与来自mongodb的json数据
【发布时间】：2018-04-13 18:59:39
【问题描述】：

我正在尝试使用来自 mongodb 的 JSON 数据在 reactjs 中实现分页。但是页面没有根据可用的记录进行导航。

以下几点有效：

分页按钮已可用。我能够从分页导航栏中单击并更改按钮。

以下点不起作用：

点击分页导航栏按钮时，表格记录不会改变。

请在下面找到代码。

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 } />
</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>
);
}
}

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

render() {
const per_page=10;
let currentPage=8;
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) => <SearchResultsItem key={ item.id } item={ item } open={ this.props.open }  /> 
) 
}</tbody>);
}
}

【问题讨论】：

Reactjs Pagination - unable to paginate the data的可能重复
是的，但是我已经修改了代码。现在几乎接近解决方案了。这种方法比我以前的方法好..你能帮帮我吗..？
您缺少if (index >= start_offset && start_count < per_page) 这一行并且没有将值传递给SearchResultsList
是的。你说得对，我必须将索引值传递给 SearchResultsList。但它不是 (if (index >= start_offset && start_count
只有渲染没有发生。除此之外，所有功能都工作正常。

标签： mongodb reactjs pagination

【解决方案1】：

终于对我有用了。请找到分页工作代码。

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>
);
}
}

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 = this.props.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} />;
}
})
}    
</tbody>
);
}
}

【讨论】：