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的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
随机推荐
- 005-jdk安装卸载
一.yum安装 1.查看CentOS自带JDK是否已安装. yum list installed |grep java 2.若有自带安装的JDK,卸载CentOS系统自带Java环境 卸载JDK相关文 ...
- 初识ganglia
本文地址:http://www.cnblogs.com/qiaoyihang/ 一.Ganglia是什么?Ganglia主要用来解决什么样的问题? ganglia是一个可扩展的分布式监控系统,用于监控 ...
- beego——模板函数
beego 支持用户定义模板函数,但是必须在 beego.Run() 调用之前,设置如下: func hello(in string)(out string){ out = in + "wo ...
- 转:MVC遇上bootstrap后的ajax表单验证
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当 ...
- 在python中打开文件显示没有权限PermissionError: [Errno 13] Permission denied:
不多说了,我犯了低级错误 ,文件路径搞错了
- HTML中表格table边框border(1px还嫌粗)的解决方案:
摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing= ...
- 在线修改GTID模式
在线修改GTID模式 1. 在每一台机器上执行命令 SET @@GLOBAL.ENFORCE_GTID_CONSISTENCY = WARN; 这是很重要的一步,必须确保服务器上没有违反GTID规范的 ...
- Dubbo之RPC架构
为什么会有dubbo的出现: 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当 ...
- 20162326 齐力锋 2016-2017-2 《程序设计与数据结构》 MySort.java 实验博客
实验代码学习编程中的问题及解决方法 代码运行成功截图 首次代码运行出现的问题截图 问题1:无法从静态上下文中引用非静态方法 问题1解决方法及思考: split方法是非静态方法,需要借助对象来调用.我查 ...
- 探测web服务质量方法