react pagination
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的更多相关文章
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- react hooks & props change & pagination current bug
react hooks & props change & pagination current bug multi tables & pigination bug & ...
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
- react.js CMS 删除功能的实现
页面效果图: 数据操作分析: 在查询表组件的 TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(fo ...
- react服务端/客户端,同构代码心得
FKP-REST是一套全栈javascript框架 react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想, ...
- react搭配amazeui环境搭建
1.安装node https://nodejs.org/en/download/ 查看node npm版本 2.安装react 创建新的react单页面应用 npm install -g cre ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
随机推荐
- Angular学习笔记—Rxjs、Promise的区别
Promises: 异步操作完成或失败时处理单个事件 不可取消 代码可读性强,有try/catch Observables: 可持续监听和响应多个事件 可取消订阅 支持map, filter, red ...
- git命令集合
git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...
- PHP实现文件下载断点续传
<?php /* * PHP下载断点续传 * from:php100 */ function dl_file_resume($file){ //检测文件是否存在 if (!is_file($fi ...
- HDU - 4407 Sum (容斥)
题意:初始序列[1..N](1<=N<=4e5),支持两种操作:1.求区间[x,y]内与p互素的数之和: 2.将x位置的数变为c. 分析:很容易把人骗到线段树的思维中,而实际上操作2单点的 ...
- NoSQL2
系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...
- Linux 进程管理 进程优先级管理
Linux进程优先级 Linux 是一个多用户.多任务的操作系统,系统中通常运行着非常多的进程.但是 CPU 在一个时钟周期内只能运算一条指令(现在的 CPU 采用了多线程.多核心技术,所以在一个时钟 ...
- EasyUI:datagrid控件简介
EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true
- vuex初使用
- QMap的使用
1.定义 mapQMap<QString,QColor> map; 2.插入数据 map.insert("AA",RGB(255,0,0)); map.insert(& ...
- CentOS限制SSH登录地址
编辑hosts.allow文件,将允许连接的地址写进去 [root@Elements ~]# vim /etc/hosts.allow sshd:10.10.10.1:allow sshd:172.1 ...