使用rc-pagination分页插件

服务端接口开发

public ServerResponse<PageInfo> getProductList(int pageNum,int pageSize){
        // startPage--start
        // 填充自己的sql查询逻辑
        // pageHelper-收尾
        PageHelper.startPage(pageNum,pageSize);
        List<Product> productList = productMapper.selectList();

        List<ProductListVo> productListVoList = Lists.newArrayList();
        for(Product productItem : productList){
            ProductListVo productListVo = assembleProductListVo(productItem);
            productListVoList.add(productListVo);
        }
        PageInfo pageResult = new PageInfo(productList);
        pageResult.setList(productListVoList);
        return ServerResponse.createBySuccess(pageResult);
    }

在React中使用

• 安装

npm i rc-pagination

• 根据依赖包和样式封装到util/pagination/index.js

  import React          from 'react';
  import RcPagination   from 'rc-pagination';
  
  import 'rc-pagination/dist/rc-pagination.min.css'
  
  // 通用分页组件
  class Pagination extends React.Component {
  
    constructor(props){
      super(props);
    }
  
    render() {
      return (
        <div className="row">
          <div className="col-md-12">
               {/*...结构函数，和下面这样分开写效果是一样的
               current={this.props.current}
               total={this.props.total}等等
               */}
            <RcPagination {...this.props}
              {/*  hideOnSinglePage只有一页则不显示 */}
              hideOnSinglePage
              {/*  showQuickJumper快速跳转 */}
              showQuickJumper />
          </div>
        </div>
      );
    }
  }
  
  export default Pagination;
  

• 使用

  // 引入自己封装的rc-pagination
  import Pagination   from 'util/pagination/index.jsx'
  
  constructor(props){
        super(props);
        this.state = {
          list         : [],
          // 默认为1
          pageNum      : 1,
        };
    }
  
  render(){
      return(
          // pagesize默认为10
          // onChange监听页数改变
          <Pagination current={this.state.pageNum}
            total={this.state.total}
            onChange={(pageNum) => 	        	      			  this.onPageNumChange(pageNum) } 
           />
      )
  }