Question

请找到我尝试过分页的以下代码。我有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>
);
}

Answer 1

这是：

首先：Pagination只是一个插件，可以让分页工作，它不会自动更改您的数据，您需要通过onChange={this.handlePageChange}

来捕获页面更改事件

在此之后，您必须获取该值并将其设置为状态，以便您可以重新呈现视图并获取新的当前页面，如const current_page = this.state.current_page || 1;

handlePageChange(pageNumber) {
    console.log(`current_page is ${pageNumber}`);
    this.setState({current_page: pageNumber});
}

render() {
    const per_page=10;
    const pages = Math.ceil(this.props.items.length / per_page);
    const current_page = this.state.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={this.state.current_page || 1}
            onChange={this.handlePageChange} />

        </tbody>
    );
}

Answer 2

必须在handlePageChange（页面）中传递页码，并且必须设置当前页面的页码（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>
   );
  }
}

Reactjs分页 - 无法对数据进行分页

2 个答案: