去年年底,尝试着用react写个组件化的页面! demo地址

里面有一个list页面弄了一下数据的分页展示

展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

父组件listBox


const listData = [{
key:"001",
idd:"001",
title:"webstorm连接github,方便的管理仓库",
time:"2016-12-01",
tag:" git ",
contents:"66666666666666!"
}] //等等等多条数据 class listBox extends Component { constructor(props){
super(props);
this.pageNext=this.pageNext.bind(this);
this.setPage=this.setPage.bind(this);
this.state = {
indexList:[],//当前渲染的页面数据
totalData:listData,
current: 1, //当前页码
pageSize:4, //每页显示的条数
goValue:0, //要去的条数index
totalPage:0,//总页数
}; } componentWillMount(){
//设置总页数
this.setState({
totalPage:Math.ceil( this.state.totalData.length/this.state.pageSize),
})
this.pageNext(this.state.goValue) } //设置内容
setPage(num){
this.setState({
indexList:this.state.totalData.slice(num,num+this.state.pageSize)
})
} pageNext (num) {
this.setPage(num)
} render() { return (
<div className="main">
<div className="top_bar">
</div>
<div className="lists">
<ul className="index">
{this.state.indexList.map(function (cont) {
return <List {...cont} />
})}
</ul> <PageButton { ...this.state } pageNext={this.pageNext} /> </div>
</div>
);
}
}

列表组件List


class list extends Component {
constructor(props) {
super(props);
} render() {
const { idd,title,time,tag,contents } = this.props return (
<li id={idd}>
<Link to={`/list/listmore/${idd}`} >
<h3>{title}</h3>
<div className="icon">
<i className="fa fa-calendar"></i>
<span>发表于 {time} </span>
<i className="fa fa-sitemap"></i>
<span>分类于 {tag} </span>
<i className="fa fa-edit"></i>
<span>暂无评论</span>
</div>
<p>{contents}</p>
<span className="more">more</span>
</Link>
</li>
);
}
}

按钮组件PageButton


class pageButton extends Component { constructor(props) {
super(props);
this.setNext=this.setNext.bind(this);
this.setUp=this.setUp.bind(this);
this.state={
num: 0,
pagenum:this.props.current
}
} //下一页
setNext(){
if(this.state.pagenum < this.props.totalPage){
this.setState({
num:this.state.num + this.props.pageSize,
pagenum:this.state.pagenum + 1
},function () {
console.log(this.state)
this.props.pageNext(this.state.num)
})
}
} //上一页
setUp(){
if(this.state.pagenum > 1){
this.setState({
num:this.state.num - this.props.pageSize,
pagenum:this.state.pagenum - 1
},function () {
console.log(this.state)
this.props.pageNext(this.state.num)
})
}
} render() {
return (
<div className="change_page">
<span onClick={ this.setUp } >上一页</span>
<span>{ this.state.pagenum }页/ { this.props.totalPage }页</span>
<span onClick={ this.setNext }>下一页</span>
</div>
);
}
}

用react分页显示数据的更多相关文章

  1. 转:JSP 分页显示数据 (Oracle)

    JSP 分页显示数据 (Oracle) 标签: Oracle分页JSP分页 2013-11-19 20:40 3598人阅读 评论(1) 收藏 举报  分类: Web(11)  版权声明:本文为博主原 ...

  2. JSP 分页显示数据 (Oracle)

    要实现分页,首先我们要做的就是如何来编写SQL语句,网上也有很多,大家可以搜一下.在这里,我们使用一种比较常用的方式来编写SQL语句.代码如下: ----分页显示 select * from (sel ...

  3. ASP.NET(五):ASP.net实现真分页显示数据

    导读:在上篇文章中,介绍了用假分页实现数据的分页显示 ,而避免了去拖动滚动条.但,假分页在分页的同时,其实是拖垮了查询效率的.每一次分页都得重新查询一遍数据,那么有没有方法可以同时兼顾效率和分页呢,那 ...

  4. ASP.NET(四):ASP.net实现假分页显示数据

    导读:在做数据查询的时候,有的时候查询到的数据有很多.通常呢,我们一般都是去拖动右侧边的滚动条.但是,有了分页后,我们就可以不必是使用滚动条,而直接通过分页查看我们想要的数据.在分页的过程中,有分为真 ...

  5. repeater 分页显示数据

    表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...

  6. ligerui做分页显示数据

    现在前台技术用到的是ligerui,一直想写一个有关ligerui的显示,利用加班的今天偷点闲复制一下下,当自己的一些小资料吧,不会的时候,还可以来看看............稍微有点多,毕竟是从前后 ...

  7. ListView OnScrollListener详解(滑屏分页显示数据)

    package com.action; import java.util.ArrayList; import java.util.List; import android.app.Activity; ...

  8. jQuery+Ajax+PHP+Mysql实现分页显示数据

    css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...

  9. JSP页面分页显示数据

    效果如上图所示!最多显示10条:完整jsp和后台代码如下: <%@ page contentType="text/html;charset=UTF-8" %> < ...

随机推荐

  1. 51nod1126(矩阵快速幂)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...

  2. UVa 11790 - Murcia's Skyline

    题目大意:给一个建筑的序列,建筑用高度和宽度描述,找出按高度的LIS和LDS,最长XX子序列的长度按照序列中建筑的宽度和进行计算. 其实就是带权的最长XX子序列问题,原来是按个数计算,每个数权都是1, ...

  3. 安装pybloomfiltermmap 遇到bug

    pybloomfiltermmap pip 安装 : sudo pip install pybloomfiltermmap I want to try one program which have m ...

  4. bootstrap-datepicker的简单使用

    先说datepicker. github上的地址是:https://github.com/eternicode/bootstrap-datepicker. 效果如下: 在bundle里面引用添加js ...

  5. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  6. //@sourceURL=filename.js

    在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样 ...

  7. 定制自己的Unity脚本模板

    有时候想给脚本添加符合自己编程习惯的内容,或是一些个性化信息.而作为一个多多少少有点强迫症的人,这种东西要加就得每个脚本都加上,不然看着多不爽! 于是就得每添加一个脚本就去修改一下,很麻烦. 但是,在 ...

  8. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  9. Java数据库连接--JDBC调用存储过程,事务管理和高级应用

    相关链接:Jdbc调用存储过程 一.JDBC常用的API深入详解及存储过程的调用 1.存储过程的介绍 我们常用的操作数据库语言SQL语句在执行的时候要先进行编译,然后执行,而存储过程是在大型数据库系统 ...

  10. 用ant打包可运行的jar文件 (将第三方jar包放进你自己的jar包)

    http://blog.csdn.net/caiqcong/article/details/7618582 <span style="font-family:SimSun;font-s ...