class AppPagination extends React.Component {
handleChange(pageNum) {
this.props.handleChangePage(pageNum);
}
showTotalPage() {
return `共 ${this.props.total} 条`;
}
render() {
return (
<div>
{this.props.total > 0 ? <Pagination
defaultCurrent={1}
showQuickJumper={true}
total={this.props.total}
pageSize={this.props.pageSize}
showTotal={this.showTotalPage.bind(this)}
onChange={this.handleChange.bind(this)}
/> : null}
</div>
)
} }
export default AppPagination;

使用:

<AppPagination
total={this.state.totalElements}
pageSize={this.state.size}
handleChangePage={(pageNum) => this.handleChangePage(pageNum)}
/>
handleChangePage(pageNum){
initdata(pageNum)
}

react pagination的更多相关文章

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

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

  2. react hooks & props change & pagination current bug

    react hooks & props change & pagination current bug multi tables & pigination bug & ...

  3. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  4. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  5. react.js CMS 删除功能的实现

    页面效果图: 数据操作分析: 在查询表组件的  TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(fo ...

  6. react服务端/客户端,同构代码心得

    FKP-REST是一套全栈javascript框架   react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想, ...

  7. react搭配amazeui环境搭建

    1.安装node https://nodejs.org/en/download/ 查看node   npm版本 2.安装react 创建新的react单页面应用 npm install  -g cre ...

  8. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  9. 在react中实现打印功能

    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...

随机推荐

  1. JVM虚拟机—JVM的类加载机制

    1 什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装类在方法区内的数据结构 ...

  2. 如何使用django中的cookie和session?

    1.Cookie 介绍 Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Co ...

  3. CKEditor的下载、配置与使用

    CKEditor简介: CKEditor 是一款功能强大的开源在线文本编辑器.它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致.CKEditor 完全是基于 Java ...

  4. Java NIO2 File API介绍

    Introduction to the Java NIO2 File API GitHub NIO2中的文件API是Java 7附带的Java平台的主要新功能之一,特别是新的文件系统API的一个子集以 ...

  5. python基础(数字、字符串、布尔值、字典数据类型简介)

    一 执行第一个python程序 1.下载安装python2.7和python3.6的版本及pycharm,我们可以再解释器中输入这样一行代码: 则相应的就打出了一句话.这里的print是打印的意思.你 ...

  6. python约束 与MD5加密写法

    python 中约束写法有两种 1 常用的通过继承关系主动抛出异常  2 通过抽象类+抽象方法 1 常用的通过继承关系主动抛出异常写法 在本send方法中报错不会抛出异常, class BaseMes ...

  7. CodeForces - 220B Little Elephant and Array (莫队+离散化 / 离线树状数组)

    题意:N个数,M个查询,求[Li,Ri]区间内出现次数等于其数值大小的数的个数. 分析:用莫队处理离线问题是一种解决方案.但ai的范围可达到1e9,所以需要离散化预处理.每次区间向外扩的更新的过程中, ...

  8. Visual Studio各版本区别

    Visual Studio 是微软公司推出的开发环境,Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序,也可以用来创建网络服务.智能设备应用程 ...

  9. C# 获取当前星期几

    private static string GetWeekName() { string weekName = ""; switch (DateTime.Now.DayOfWeek ...

  10. List To Json

    命名空间 using Newtonsoft.Json; 实例代码 /// <summary> /// 将list集合转换为json /// </summary> /// < ...