<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>用react写表单验证</title>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>

    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>

    <style>

    .fl{float: left;}

    .fr{float: right;}

    .ui-pagnation {display: block; margin-top: 50px; color: #535353; line-height: 29px; text-align: center }

    .ui-pagnation a {float: left; min-width: 30px; height: 30px; padding: 0 7px; vertical-align: middle; text-decoration: none; cursor: pointer;}

    .ui-pagnation .next,.ui-pagnation .prev {margin: 0 9px; background-color: #f3f4f8; border: 1px solid #00a0e9 }

    .ui-pagnation .next:before,.ui-pagnation .prev:before {content: '<'; color: #00a0e9; font-size: 14px }

    .ui-pagnation .next:hover,.ui-pagnation .prev:hover {border-color: #50c8ff }

    .ui-pagnation .next:hover:before,.ui-pagnation .prev:hover:before {color: #50c8ff }

    .ui-pagnation .disable.next,.ui-pagnation .prev.disable {background-color: #f3f4f8; border-color: #a0a0a0; cursor: no-drop;}

    .ui-pagnation .disable.next:before,.ui-pagnation .prev.disable:before {color: #a0a0a0 }

    .ui-pagnation .next:before {content: '>'}

    .ui-pagnation .num {margin-left: -1px; padding: 0 7px; border: 1px solid #e5e5e5; color: #707070 }

    .ui-pagnation .num.current,.ui-pagnation .num:hover {background-color: #a7bbcb; border-color: #a7bbcb; color: #fff }

    .ui-pagnation .ellipsis {width: 42px; height: 30px; color: #707070; line-height: 30px }

    .ui-pagnation input {width: 44px; height: 24px; border: 1px solid #eee; text-align: center }

    .ui-pagnation .page-go {min-width: 60px; margin-left: 10px; margin-right: 10px; background-color: #a7bbcb; border: 1px solid #879cac; color: #fff }

    .ui-pagnation .page-go:hover {background-color: #87a2b8; border-color: #698397 }

    </style>

</head>

<body>

<div id="demo"></div>

<script type="text/babel">

var Page = React.createClass({

    getInitialState: function() {

        return {current: 1, value : ''};

    },

    handClick : function(e){

        let sel = this;

        return function(){

            sel.setState({current : e});

        }

    },

    handChange : function(e){

        this.setState({value : e.target.value})

    },

    goNext : function(){

        let cur = this.state.current;

        if(cur < this.props.total){

            this.setState({current : cur + 1});

        }

    },

    goPrev : function(){

        let cur = this.state.current;

        if(cur > 1){

            this.setState({current : cur - 1});

        }

    },

    goPage : function(){

        var val = this.state.value;

        if(!/^[1-9]\d*$/.test(val)){

            alert('页码只能输入大于1的正整数');

        }else if(parseInt(val) > parseInt(this.props.total)){

            alert('没有这么多页');

        }else{

            this.setState({current : val});

        }

    },

    render : function(){

        let self = this;

        let total = this.props.total;

        let cur = this.state.current;

        let items = [];

        let begin;

        let len;

        if(total > 5){

            len = 5;

            if(cur >= (total-2)){

                begin = total - 4;

            }else if(cur <= 3){

                begin = 1;

            }else{

                begin = cur - 2;

            }

        }else{

            len = total;

            begin = 1;

        }

        for(let i = 0; i < len; i ++){

            let cur = this.state.current;

            let showI = begin + i;

            if(cur == showI){

                items.push({num : showI, cur : true});

            }else{

                items.push({num : showI, cur : false});

            }

        }

        return  <div className="ui-pagnation">

                    <a className={this.state.current == 1? 'prev disable' : 'prev'} onClick={this.goPrev}></a>

                    <span className="pagnation-cols">

                        {

                            items.map(function(item){

                                return <a onClick={self.handClick(item.num)} className={item.cur? 'num current' : 'num'}>{item.num}</a>

                            })

                        }

                    </span>

                    <a className={this.state.current == this.props.total? 'next disable' : 'next'} onClick={this.goNext}></a>

                    <div className="fl">

                        共

                        <span className="num-total">{total}</span>

                        页，到第

                        <input type="text" value={self.state.value} onChange={this.handChange} />

                        页

                    </div>

                    <a onClick={this.goPage} className="page-go">确定</a>

                </div>

    }

});

ReactDOM.render(

    <div>

        <Page total="20" />

    </div>,

    document.getElementById('demo')

);

</script>

</body>

</html>

React,js实现分页的案列的更多相关文章

  1. react 的安装和案列Todolist

    react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  4. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  5. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  6. 大数据技术之_14_Oozie学习_Oozie 的简介+Oozie 的功能模块介绍+Oozie 的部署+Oozie 的使用案列

    第1章 Oozie 的简介第2章 Oozie 的功能模块介绍2.1 模块2.2 常用节点第3章 Oozie 的部署3.1 部署 Hadoop(CDH版本的)3.1.1 解压缩 CDH 版本的 hado ...

  7. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. java.lang.UnsupportedClassVersionError: TwoSum : Unsupported major.minor version 52.0

    编译的版本比运行的版本高. 两台电脑,一个装的是jdk1.7,另一个是1.8,在1.8上运行之后,上传到github然后1.7的拉下来,再运行出现了上述错误. 解决方式:设置如下

  2. 提交form表单不刷新页面案列

    提交form表单不刷新页面其实很简单的,这里拿上传图片来举列,大家有什么其它的方法也欢迎留言告知与我 <form action="" method="post&qu ...

  3. JS 心得总结

    1.浏览器关闭事件监听(http://pengjianbo1.iteye.com/blog/507569,http://bbs.csdn.net/topics/360152711) <!DOCT ...

  4. 安装redis时遇到zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录

    参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc

  5. Amoeba-mysql读写分离实战

    Amoeba-mysql读写分离实战 Amoeba用途有很多,这里看标题我们就先说读写分离,因为我也只会这个.Amoeba定义为国内的,开源的.目前(2015年10月20日)我们用amoeba2.2版 ...

  6. AccessViolationException: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。

    在使用SqlConnection.Open()连接到SQL Server 2008 R2 SP2时,一直报以下异常: AccessViolationException: 尝试读取或写入受保护的内存.这 ...

  7. itertools 介绍

    在python中itertool为python提供一系列迭代iterator的方法. 第一个:组合 排列 itertools.combinations(sq, r) 该函数的作用是在列表sq中穷举所有 ...

  8. ios-NSMutableAttributedString 更改文本字符串颜色、大小

    NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...

  9. Oracel数据库连接时出现：ORA-12518：监听程序无法分发客户机连

    在连接Oracel数据库时,每隔一段时间就会出现:ORA-12518:监听程序无法分发客户机连接,如图 上网查了资料原因和解决方案如下: 一.[问题描述] 最近,在系统高峰期的时候,会提示如上的错误, ...

  10. LoadRunner11.00入门教程出现的问题

    问题1.打不开浏览器 解决办法:打开浏览器工具--Internet 选项--高级--取消启用第三方浏览器扩展. 顺带解决了,有两个浏览器问题. 两个浏览器:一个是自带的IE,一个是其他软件插件. 解决 ...