下一页和上一页在react-bootstrap-table2-paginator中不起作用 [英] next page and previous page not working in react-bootstrap-table2-paginator

问题描述

我已经使用react-bootstrap-table2-paginator实现了带有分页的表. 在每个页码上单击，它将调用api并获取表格日期. 可以，但是下一页，上一页和最后一页都无法使用.

I have implemented table with pagination using react-bootstrap-table2-paginator. on each pagenumber click it will call api and fetch table date. It works but nextpage,prevpage and last page was not working.

我使用过pageButtonRenderer，除了下一页和上一页，最后一页不起作用之外，其他所有功能都可以使用.

I have used pageButtonRenderer, also everything working but next page and previous page , last page not working.

class TableData extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state={  page: 1,
      sizePerPage: 10};
  }
  render() {
    const pageButtonRenderer = ({
      page,
      currentPage,
      disabled,
      title,
      onPageChange
    }) => {
      const handleClick = (e) => {
        e.preventDefault();
        if(typeof page !== "string" ){
         this.setState({ page: page});
         this.props.pageClick(page, this.state.sizePerPage);// api call 
        }
       };    
      return (
        <div>
          {
           <li className="page-item">
             <a href="#"  onClick={ handleClick } className="page-link">{ page }</a>
           </li>
          }
        </div>
      );
    };
    const sizePerPageRenderer = ({
      options,
      currSizePerPage,
      onSizePerPageChange
    }) => (
      <div className="btn-group" role="group">
        {options.map(option => (
            <button
              key={option.text}
                 type="submit"
              onClick={(e) => {
                onSizePerPageChange(option.page);
                if (e) e.preventDefault();
              }}
              className={`btn ${
                currSizePerPage === `${option.page}`
                  ? "btn-secondary"
                  : "btn-warning"
              }`}
            >
              {option.text}
            </button>
          ))}
      </div>
    );
    const options = {
      sizePerPageRenderer,
      totalSize: 1000,
      pageButtonRenderer,
      onSizePerPageChange: (sizePerPage, page) => {
        this.setState({sizePerPage: sizePerPage},()=>{
         this.props.pageClick(page,sizePerPage);
        });
      }
    };
    return (
      <div className="table-wrapper">
        <BootstrapTable
          pagination={paginationFactory(options)}
          options={options}
          keyField="id"
          data={rows}
          columns={columns}
        />
      </div>
    );
  }
}
export default TableData;

推荐答案

您将需要在handleClick中调用onPageChange(page)

You will need to call onPageChange(page) in your handleClick

     const handleClick = (e) => {
        e.preventDefault();
        if(typeof page !== "string" ){
         this.setState({ page: page});
         this.props.pageClick(page, this.state.sizePerPage);// api call 
         onPageChange(page); <------ here
        }
       };

查看全文