1. class AppPagination extends React.Component {
  2. handleChange(pageNum) {
  3. this.props.handleChangePage(pageNum);
  4. }
  5. showTotalPage() {
  6. return `共 ${this.props.total} 条`;
  7. }
  8. render() {
  9. return (
  10. <div>
  11. {this.props.total > 0 ? <Pagination
  12. defaultCurrent={1}
  13. showQuickJumper={true}
  14. total={this.props.total}
  15. pageSize={this.props.pageSize}
  16. showTotal={this.showTotalPage.bind(this)}
  17. onChange={this.handleChange.bind(this)}
  18. /> : null}
  19. </div>
  20. )
  21. }
  22.  
  23. }
  24. export default AppPagination;

使用:

  1. <AppPagination
  2. total={this.state.totalElements}
  3. pageSize={this.state.size}
  4. handleChangePage={(pageNum) => this.handleChangePage(pageNum)}
  5. />
  6. handleChangePage(pageNum){
  7. initdata(pageNum)
  8. }

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. BeanUtils.copyProperties()

    BeanUtils.copyProperties() PropertyUtils.copyProperties() 通过反射将一个对象的值赋值个另外一个对象(前提是对象中属性的名字相同). 后付前 P ...

  2. Linux学习笔记—文件与文件系统的压缩与打包(转载)

    压缩文件的用途与技术 例如,计算机都是以byte单位来计量的,1byte占8bit.如果存储数字1,那么1byte就会空出7bit.采用一定的计算方式,压缩这些空间可以大大降低文件存储. Linux系 ...

  3. GSM/GPRS/3G/4G

    1.状态机机制的gprs拨号 像GPRS/3G模块之类的应用,需要连接,登陆,初始化等步骤完成后才能传输数据,而这些步骤又比较耗时. 所以用 状态机 + 超时 的机制来实现比较合理. 如下代码片段来描 ...

  4. 编译hadoop2.6.0 cdh 5.4.5 集成snappy压缩

    原文地址:http://www.cnblogs.com/qiaoyihang/p/6995146.html 自带的为32位库,故需要把64为重编译进去 1.下载源码:http://archive-pr ...

  5. PScc

      photoshop cc 2018破解版是Adobe公司最新版专业化CC图像处理软件,新功能超乎你的想象!photoshop cc 2018破解版新功能给力来袭,访问Lightroom照片,分享作 ...

  6. (转) latch 入门

    原链接:http://www.itpub.net/thread-1424719-1-1.html (入门1)一直想点文章关于Latch的,又一直没写,一是因为懒,二是一直觉得现在关于Latch的书那么 ...

  7. 安装vue-cli脚手架

    一.安装node.js 1.什么是node.js? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模 ...

  8. 浅析造成 JS 内存泄露的几种原因及解决方案

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使 ...

  9. Xamrin开发安卓笔记(三)

    http://www.cnblogs.com/minCS/p/4118170.html Xamrin开发安卓笔记(三)   安装片 Xamrin开发安卓笔记(一) Xamrin开发安卓笔记(二) 这次 ...

  10. javaEE中的字符编码问题

    0 web.xml中注册的CharacterEncodingFilter <!-- 配置字符集过滤器 --> <filter> <filter-name>encod ...