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. TypeScript学习笔记—数据类型

    TypeScript 数据类型 Boolean 类型 let isDone: boolean = false; // tsc => var isDone = false; Number 类型 l ...

  2. tensorflow 中 softmax_cross_entropy_with_logits 与 sparse_softmax_cross_entropy_with_logits 的区别

    http://stackoverflow.com/questions/37312421/tensorflow-whats-the-difference-between-sparse-softmax-c ...

  3. boost智能指针总结

    智能指针是一种具备指针类似行为的对象,当不在需要它的时候自动删除其引用的c++对象.直接点说就是自动析构C++对象. boost提供了6种智能指针,如下所示: scoped_ptr <boost ...

  4. s5_day1作业

    #1.使用while循环输出1 2 3 4 5 6 8 9 10 # s=0 # while s<10: # s+=1 # if s==7: # continue # print(s) # fo ...

  5. SVN使用—工作模式及运行原理以及优缺点对比

    一.SVN原理 (1)运行方式 svn服务器有2种运行方式:独立服务器和借助apache运行. 1.独立服务器访问 访问地址如:svn://svn.test.com/test 2.借助Apache等h ...

  6. shell-一些有趣的使用

    1. 对字符串进行MD5加密  echo test |md5sum|awk '{print $1}' 字符串数量很多时可以这样做: echo test |md5sum|awk '{print $1}' ...

  7. 配置nginx,Tomcat日志记录请求耗时

    由于公司的业务比较特殊,对速度比较在意,客户最近反应我们的平台时间比较久,处理一个请求十秒左右才返回,领导要求找出原因,我想让nginx日志记录请求处理用了多长时间,后端处理用了多长时间,总共用了多长 ...

  8. 汇编指令与Intrinsics指令的对应关系汇总

    汇编指令与Intrinsics指令的对应关系汇总 参考网址:https://software.intel.com/sites/landingpage/IntrinsicsGuide/ 1.赋值指令:m ...

  9. 带SSL证书的httpclient 远程接口工具类

    package com.iups.wx.util; import java.io.IOException; import java.io.UnsupportedEncodingException; i ...

  10. how to create an asp.net web api project in visual studio 2017

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutoria ...