标签：插件 pageNum 项目 rc pagination react return props import

使用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) } 
           />
      )
  }
  

标签：插件,pageNum,项目,rc,pagination,react,return,props,import
来源： https://www.cnblogs.com/hsbolg/p/12751344.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。