<!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. HTML静态网页 图片热点、框架、表单

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...

  2. IE 9 以下兼容HTML5

    <head> <meta name="viewport" content="width=device-width,initial-scale=1.0&q ...

  3. php内网探测脚本&简单代理访问

    <?php $url = isset($_REQUEST['u'])?$_REQUEST['u']:null; $ip = isset($_REQUEST['i'])?$_REQUEST['i' ...

  4. Golden Gate 概念和机制

    1. OGG有哪些进程 ü  Manger : manger进程是goldengate的控制进程,分别运行在源端和目标端上,它主要的作用是启动.监控.重启goldengate的其他进程,报告错误及事件 ...

  5. 累积进度图及本周PSP饼状图

    每周进度   项目:词频统计  项目类型:个人项目 项目完成情况:已完成 C类别 C内容 S开始时间 E结束时间 I间隔 T净时间 分析 需求,设计 10:00 10:49 20 29 编码 代码的实 ...

  6. Flink - RocksDBStateBackend

    如果要考虑易用性和效率,使用rocksDB来替代普通内存的kv是有必要的 有了rocksdb,可以range查询,可以支持columnfamily,可以各种压缩 但是rocksdb本身是一个库,是跑在 ...

  7. 修改ArcGIS Server Account / 站点管理员的 账号、密码

    安装ArcGIS Server(10.1之后版本)时会先后创建两个账户:ArcGIS Server Account和站点管理账户 ArcGIS Server Account 是操作系统账户,Serve ...

  8. Apply 与 Call 的用法（简化版）

    Javascript中Apply 与 Call 的用法,这里只作简单的入门说明 function human( name, age ){ this.name = name; this.age = ag ...

  9. 《Linux内核分析》第三周 构建一个简单的Linux系统MenuOS

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK THREE ...

  10. 小试牛刀2：JavaScript基础题

    JavaScript基础题 1.网页中有个字符串“我有一个梦想”,使用JavaScript获取该字符串的长度,同时输出字符串最后两个字. 答案: <!DOCTYPE html PUBLIC &q ...