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. Angular学习笔记—Rxjs、Promise的区别

    Promises: 异步操作完成或失败时处理单个事件 不可取消 代码可读性强,有try/catch Observables: 可持续监听和响应多个事件 可取消订阅 支持map, filter, red ...

  2. git命令集合

    git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...

  3. PHP实现文件下载断点续传

    <?php /* * PHP下载断点续传 * from:php100 */ function dl_file_resume($file){ //检测文件是否存在 if (!is_file($fi ...

  4. HDU - 4407 Sum (容斥)

    题意:初始序列[1..N](1<=N<=4e5),支持两种操作:1.求区间[x,y]内与p互素的数之和: 2.将x位置的数变为c. 分析:很容易把人骗到线段树的思维中,而实际上操作2单点的 ...

  5. NoSQL2

    系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...

  6. Linux 进程管理 进程优先级管理

    Linux进程优先级 Linux 是一个多用户.多任务的操作系统,系统中通常运行着非常多的进程.但是 CPU 在一个时钟周期内只能运算一条指令(现在的 CPU 采用了多线程.多核心技术,所以在一个时钟 ...

  7. EasyUI:datagrid控件简介

    EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true

  8. vuex初使用

  9. QMap的使用

    1.定义 mapQMap<QString,QColor> map; 2.插入数据 map.insert("AA",RGB(255,0,0)); map.insert(& ...

  10. CentOS限制SSH登录地址

    编辑hosts.allow文件,将允许连接的地址写进去 [root@Elements ~]# vim /etc/hosts.allow sshd:10.10.10.1:allow sshd:172.1 ...