<!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. CentOS默认开放的本地端口范围

    系统本地开放端口的范围:(默认30000多到60000多) [root@linux2 ~]# vim /etc/sysctl.conf net.ipv4.ip_local_port_range = 1 ...

  2. js 禁止表单提交的方法（文件上传）

    添加图片上传的表单,在form 添加属性onsubmit,提交之前会执行其中的方法,若返回FALSE,不会提交,返回TRUE,才会提交 <form method="post" ...

  3. swift 2.x学习笔记(一)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0. ...

  4. python 正则使用笔记

    python正则使用笔记 def remove_br(content): """去除两边换行符""" content = content.r ...

  5. P1026 统计单词个数

    题意 给出一段字符串和一个字典,把字符串划分为n个连续的子串,求一种最优的划分方式使字符串所含单词数最大.(详见NOIp2001) 思路 这个题是一个很典型的线性dp,难点主要在预处理上. 理解题意后 ...

  6. PHPExcel导出数据

    require_once './class/Excel/PHPExcel.php'; //将(1,1)转换成"A1"形式 function getCoordinate($row, ...

  7. 使用Mongo官方驱动操作Mongo数据库

    首先到 https://github.com/mongodb/mongo-csharp-driver/downloads 下载Mongo官方驱动 下载完成后引用到项目中 public class Co ...

  8. windows下的socket网络编程（入门级）

    windows下的socket网络编程 clinet.c 客户端 server.c 服务器端 UDP通信的实现 代码如下 已经很久没有在windows下编程了,这次因为需要做一个跨平台的网络程序,就先 ...

  9. LightOj 1278 - Sum of Consecutive Integers（求奇因子的个数）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1278 题意:给你一个数n(n<=10^14),然后问n能用几个连续的数表示; 例 ...

  10. k8s入门系列之介绍篇

    •Kubernetes介绍1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境2.什么是ku ...