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. n个数里选出m个不重复的数

    void change(int *p,int a,int b) { int tmp = *(p + a); *(p + a) = *(p + b); *(p + b) = tmp; } int mai ...

  2. python 系统相关操作

    1.文件 open()代开文件或者创建文件 fout=open('oops.txt','wt') print('Oops, I created a file.',file=fout) fout.clo ...

  3. SVN项目迁移到GIT

    源项目为SVN项目,  复制一份出来后. 在VS里无法修改 源码管理器的插件为GIT.    解决方法:  删除SVN插件信息 在解决方案文件中. 删除以下SVN信息就可以了   删除后:

  4. redmine安装及SVN(https)配置

    一键安装redmine https://blog.csdn.net/qq_26898315/article/details/50233483 配置SVN(引用: https://blog.csdn.n ...

  5. java基础知识框图

  6. Java Web架构总结

    转载至:http://www.cnblogs.com/wuxl360/p/7489763.html 初始搭建 开始的开始,就是各种框架一搭,然后扔到Tomcat容器中跑就是了,这时候我们的文件,数据库 ...

  7. iPhone获取手机里面所有的APP(私有库)+ 通过包名打开应用

    1.获取到手机里面所有的APP包名 - (void)touss { Class lsawsc = objc_getClass("LSApplicationWorkspace"); ...

  8. powerdesigner解决创建多个表表主键名称重复的问题

    选择菜单栏的tools选项,选择Model  Options..,选择Model Settings  只要将图片中的选择打钩去掉即可(操作步骤1),同时设置为默认选项(操作步骤2),防止以后问题又出现 ...

  9. tesseract编译各种 “锟斤拷” 等中文乱码 编译失败问题

    编译tesseract - ocr时 各种不通过 也很疑惑,完全按照官方指导来的啊 首先以为是vs的编码问题,随切换选项-切换Unicode或多编码字符集,但仍无效. 定位到乱码的文件,用notepa ...

  10. 20145201《Java程序设计》第7周学习总结

    20145201 <Java程序设计>第七周学习总结 教材学习内容总结 本周学习了课本第十二.十三章内容,即Lambda.时间与日期 第十二章 Lambda 12.1 认识Lambda语法 ...