话不多少，直接上代码

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript分页效果</title>

    <style>

        a{margin-right:5px;}

    </style>

</head>

<body>

    <div id="div1">

    </div>

    <script src="js/myPage.js"></script>

</body>

</html>

javascript代码：

window.onload = function() {

    var page = new Page({

        'id': 'div1',

        'allNum': ,

        'showNum': ,

        'nowNum': ,

        'callback':function(nowIndex,allIndex){

            alert('当前页'+nowIndex+',总页数'+allIndex);

        }

    });

    page.init();

}

//采用面向对象的方法进行封装

function Page(opt) {

    if (!opt) {

        return;

    }

    this.id = opt.id;

    this.oParent = document.getElementById(this.id);

    //一共有多少页

    this.allNum = opt.allNum || ;

    //显示多少个分页

    this.showNum = opt.showNum || ;

    //当前选择的页面

    this.nowNum = opt.nowNum || ;

    this.callback=opt.callback||function(){};

}

Page.prototype = {

    constructor: Page,

    init: function() {

        var that = this;

        this.change();

    },

    change: function(curNum) {

        this.nowNum = curNum;

        //为了提高性能，可以移除原来所有链接的事件处理程序

        var aAs = this.oParent.getElementsByTagName('a');

        for (var i = ; i < aAs.length; i++) {

            aAs[i].onclick = null;

        }

        this.oParent.innerHTML = '';

        var tmp = Math.floor(this.showNum / );

        //处理首页，当nowNum>tmp+1,并且allNum>showNum时显示

        if (this.nowNum > tmp +  && this.allNum > this.showNum) {

            this.appendLink('#1', '首页');

        }

        //处理上一页，只要当前选择页不是首页，就呈现

        if (this.nowNum > ) {

            this.appendLink('#' + (this.nowNum - ), '上一页');

        }

        //处理中间页码

        //如果总页码小于显示页码数，从1开始以此显示

        if (this.allNum <= this.showNum) {

            this.appendPageLinks(, this.allNum);

        } else {

            //如果选择的是第1页到第tmp页，显示前面showNumge

            if (this.nowNum <= tmp) {

                this.appendPageLinks(, this.showNum);

            }

            //如果选择是第this.allNum-tmp,显示最后showNum个

            else if (this.nowNum >= this.allNum - tmp) {

                this.appendPageLinks(this.allNum - this.showNum + , this.allNum);

            }

            //其他情况，则以this.nowNum为中心，显示this.showNum个

            else {

                this.appendPageLinks(this.nowNum - tmp, this.nowNum + tmp);

            }

        }

        //处理下一页，只要当前选择的不是最后一页，就显示下一页

        if (this.nowNum < this.allNum) {

            this.appendLink('#' + (this.nowNum + ), '下一页');

        }

        //处理最后一页，当nowNum<this.allNum-tmp,并且allNum>showNum时候显示

        if (this.nowNum < this.allNum - tmp & this.allNum > this.showNum) {

            this.appendLink('#' + this.allNum, '尾页');

        }

        //添加事件处理程序

        var that = this;

        var aAs = this.oParent.getElementsByTagName('a');

        for (var i = ; i < aAs.length; i++) {

            aAs[i].onclick = function() {

                var index = parseInt(this.getAttribute('href').substring());

                that.change(index);

                that.callback(that.nowNum,that.allNum);

                return false;

            }

        }

    },

    appendLink: function(href, innerHtml) {

        var oA = document.createElement('a');

        oA.href = href;

        oA.innerHTML = innerHtml;

        this.oParent.appendChild(oA);

    },

    appendPageLink: function(pageNum) {

        if (pageNum === this.nowNum) {

            this.appendLink('#' + pageNum, pageNum);

        } else {

            this.appendLink('#' + pageNum, '[' + pageNum + ']');

        }

    },

    appendPageLinks: function(startPageNum, endPageNum) {

        for (var i = startPageNum; i <= endPageNum; i++) {

            this.appendPageLink(i);

        }

    }

}

javascript实例学习之四——javascript分页的更多相关文章

  1. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  2. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

  3. javascript笔记：javascript的关键所在---作用域链

    javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...

  4. JavaScript强化教程——JavaScript 总结

    本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. Javascript学习2 - Javascript中的表达式和运算符

    原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...

  7. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  8. 第一百二十九节，JavaScript，理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. Scrum会议5

    组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.20 已完成内容: 1.游戏中实现了两个按钮消除的算法. 2.在游戏中加入了音乐. 计划完 ...

  2. redis列表list

    Redis Rpush 命令  Redis 列表(List) Redis Rpush 命令用于将一个或多个值插入到列表的尾部(最右边). 如果列表不存在,一个空列表会被创建并执行 RPUSH 操作. ...

  3. Java单链表的实现

    将结点Node进行封装,假设Node的操作有增加,删除,查找,打印几个操作.将Node实现为链表Link的内部类,简化代码. package Chapter5; import java.securit ...

  4. Flink Internals

    https://cwiki.apache.org/confluence/display/FLINK/Flink+Internals   Memory Management (Batch API) In ...

  5. 二进制流 最后一段数据是最后一次读取的byte数组没填满造成的

    while(in.read(temp)!=-1){ out.write(temp); } 改成: int len; while((len=in.read(temp))!=-1){out.write(t ...

  6. Gradle 修改 Maven 仓库地址

    gradle install--- http://www.itnose.net/detail/6500082.html http://stackoverflow.com/questions/51025 ...

  7. SQL 编辑

    局部变量: DECLARE @variable_name Datatype Variable_naem为局部变量的名称,Datatype为数据名称. 例如: DECLARE @name varchar ...

  8. 【Java 基础篇】【第一课】HelloWorld

    有点C++基础,现在需要快速的学会java,掌握java,所以就这样了,写点博客,以后看起来也好回顾. 1.第一步 javaSDK和Eclipse下载就不说了,搞定了这两样之后: 2.打开Eclips ...

  9. 20145211 《Java程序设计》第2周学习总结——桃花依旧笑春风

    教材学习内容总结 基本类型 整数 short 2字节,int 4字节,long 8字节 字节 byte 1字节 浮点数 float 4字节,double 8字节 字符 char 2字节(包括字母.汉字 ...

  10. JS-008-日期控件操作

    此文以 js 操作 layDate 日期组件为示例演示,进行日期修改. 相应的演示示例脚本,敬请参阅之前的博文:HTML-001-日期组件 layDate 演示. 操作结果如下所示: 至此, JS-0 ...