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. 从0开始用python实现神经网络 IMPLEMENTING A NEURAL NETWORK FROM SCRATCH IN PYTHON – AN INTRODUCTION

    code地址:https://github.com/dennybritz/nn-from-scratch 文章地址:http://www.wildml.com/2015/09/implementing ...

  2. R语言seq()函数用法

    1.seq() 用来生成一组数字的函数. Usage: ## Default S3 method:seq(from = 1, to = 1, by = ((to - from)/(length.out ...

  3. 经典排序算法的总结及其Python实现

    经典排序算法总结: 结论: 排序算法无绝对优劣之分. 不稳定的排序算法有:选择排序.希尔排序.快速排序.堆排序(口诀:“快速.选择.希尔.堆”).其他排序算法均为稳定的排序算法. 第一趟排序后就能确定 ...

  4. 浅谈 JS 内存泄露方式与避免方法(二)

    Concept WHAT : 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.正常情况下,垃圾回收器在DOM元素和event处理器不被引用或访问的时候回收它们.但是,IE的早些 ...

  5. beego——错误处理

    beego通过Redirect方法来进行跳转: func (this *AddController) Get() { this.Redirect("/", 302) } 如何终止此 ...

  6. go——数组

    数组(array)就是由若干个相同类型的元素组成的序列. var ipv4 [4]uint8 = [4]uint8(192,168,0,1) 在这条赋值语句中,我们为刚声明的变量ipv4赋值.在这种情 ...

  7. Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索"

    Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索" //匹配右边 var   reg: TPerlRegEx; begin   ...

  8. AOP-面向方面编程

    面向方面编程(aspect-oriented programming,AOP)是一种编程范式,旨在提高模块化允许横向关注点的分离.该范式以一种成为方面(Aspect)的语言构造为基础,切面是一种新的模 ...

  9. 解决Can't connect to local MySQL server through socket '/tmp/mysql.sock'

    0 Problem 电脑重启后用python的MySQLdb连接数据库报错 Can't connect to local MySQL server through socket '/tmp/mysql ...

  10. MySQL-5.7 Update语句详解

    1.语法 (1)单表 UPDATE [LOW_PRIORITY] [IGNORE] table_reference SET assignment_list [WHERE where_condition ...