1.用户列表页面使用的rc-pagination分页组件

Github地址: https://github.com/react-component/pagination

2.安装

cnpm install --save-dev rc-pagination

3.引入

  1. import React from 'react';
  2. import RcPagination from 'rc-pagination';
  3. import 'rc-pagination/dist/rc-pagination.min.css';

4.封装成组件,在util里边新建文件夹Pagination,里边新建 index.jsx

  1. import React from 'react';
  2. import RcPagination from 'rc-pagination';
  3. import 'rc-pagination/dist/rc-pagination.min.css';
  4.  
  5.  class Pagination extends React.Component{
  6.     constructor(props){
  7.         super(props);
  8.     }
  9.     render(){
  10.         return(
  11.            <div className="row">
  12.               <div className="col-md-12">
  13.                   <RcPagination {...this.props}
  14.                        hideOnSinglePage
  15.                        showQuickJumper/>
  16.               </div>
  17.            </div>
  18.         );
  19.     }
  20.  }

5.使用, Pagination组件里边要传入两个参数,一是current 当前页,二是total总记录数, pageSize每一页的记录数量默认为10

  1. import Pagination from 'util/pagination/index.jsx';
  2.  
  3.   <Pagination current={this.state.pageNum}
  4.                 total={this.state.total}
  5.                 onChange={(pageNum) => {this.onPageNumChange(pageNum)}}/>

6.Pagination组件里边可以定义onchange事件, Function(current, pageSize) ,参数是当前页current和pageSizeme每页的记录数

React后台管理系统- rc-pagination分页组件封装的更多相关文章

  1. React后台管理系统-商品管理列表组件

    1.商品列表页面结构 <div id="page-wrapper">              <PageTitle title="商品列表" ...

  2. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  4. elementUI分页组件封装

    在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...

  5. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  6. 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  7. 《React后台管理系统实战 零》:基础笔记

    day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...

  8. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  9. React后台管理系统-用户列表页面

    1.页面的结构 //遍历list, 返回数据       let listBody= this.state.list.map((user,index)=> {           return ...

随机推荐

  1. 「模拟赛20180306」回忆树 memory LCA+KMP+AC自动机+树状数组

    题目描述 回忆树是一棵树,树边上有小写字母. 一次回忆是这样的:你想起过往,触及心底--唔,不对,我们要说题目. 这题中我们认为回忆是这样的:给定 \(2\) 个点 \(u,v\) (\(u\) 可能 ...

  2. 解决Win10中vmware运行特别慢问题

    1.关闭防火墙:win+S打开搜索框,输入防火墙,选择windowsDefender防火墙 ,如图: 2.启用或关闭防火墙,如图: 3.关闭防火墙,两个选项都关闭,如图: 4.打开VMware,如果速 ...

  3. 阿里maven镜像配置

    setting.xml<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven< ...

  4. .netcore中无法使用System.Drawing --解决方案

    问题重现: 无法正常使用  解决方法: 安装System.Drawing.Common的NuGet就能正常使用了 操作之后: 这个是.netcoe中的解决办法,.net framework解决方案中添 ...

  5. Unity 行为树-基础

    .前言 Unity里面的行为树又名BehaviorTree,最常用在NPC的敌人逻辑中. 二.基础说明(转载) 1.行为树的调用时间为每帧: 2.每个节点的状态只能下面3个中的其一:成功Success ...

  6. RandomAccesssFileTest

    package com.yd.wmsc.util; import java.io.IOException; import java.io.RandomAccessFile; public class ...

  7. Unity GameObject.Find 和 transform.Find

    transform.Find(""); 找到子游戏对象,找自己找不到,能找到未激活的子游戏对象. 括号里可以是游戏对象的名字,也可以是层级. GameObject.Find(&qu ...

  8. android 开发-ListView与ScrollView事件冲突处理(事件分发机制处理)

    ListView和ScrollView都存在滚动的效果,所以一般不建议listView和scrollView进行嵌套使用,但有些需求则需要用到两者嵌套.在android的学习中学了一种事件分发处理机制 ...

  9. net 提供了Thread类用于线程的操作

    net 提供了Thread类用于线程的操作. 当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程.后台线程将会随着主线程的推出而退出.后台线程不妨碍程序的 ...

  10. iOS 收藏的笔记

    目录 UI 资料类 网络篇 图表 动画 菜单栏 数据存储和数据库 第三方库 社交分享 刷新 视频音频 其他 阅读 JS 导航 系统 支付 书籍 工具类 完整项目收集 DEMO UI http://ww ...