话不多少，直接上代码

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. php连接redis数据库 操作redis任务队列

    首先你的安装phpredis扩展在你的服务器上 $redis = new Redis(); $redis->connect('119.29.10.xx',6379); $redis->au ...

  2. Unity3D之游戏架构脚本该如何来写（转）

    这篇文章主要想大家说明一下我在Unity3D游戏开发中是如何写游戏脚本的,对于Unity3D这套游戏引擎来说入门极快,可是要想做好却非常的难.这篇文章的目的是让哪些已经上手Unity3D游戏引擎的朋友 ...

  3. DCDC(4.5V to 23V -3.3V）

    这里的电感应该用体积10*12的

  4. 微信公众账号开发教程（三） 实例入门：机器人(附源码) ——转自http://www.cnblogs.com/yank/p/3409308.html

    一.功能介绍 通过微信公众平台实现在线客服机器人功能.主要的功能包括:简单对话.查询天气等服务. 这里只是提供比较简单的功能,重在通过此实例来说明公众平台的具体研发过程.只是一个简单DEMO,如果需要 ...

  5. scandir 使用示例

    int filter_fn(const struct dirent * ent) {     if (ent->d_type != DT_REG)         return 0;     r ...

  6. 抓包工具Charles 【转】

      今天就来看一下Mac上如何进行抓包,之前有一篇文章介绍了使用Fidder进行抓包 http://blog.csdn.net/jiangwei0910410003/article/details/1 ...

  7. 删除win7中的库/收藏夹/家庭组/网络

    通过修改注册表删除库/收藏夹/家庭组/网络(还是不习惯库的这种管理方式, 导航里面又太占地方) 库:[HKEY_CLASSES_ROOT\CLSID\{031E4825-7B94-4dc3-B131- ...

  8. Redis学习笔记(1)-Key

    package cn.com; import java.text.ParseException; import java.util.List; import java.util.Set; import ...

  9. git中应用在vs中使用gitignore （转）

    在进行协作开发代码管理的过程中,常常会遇到某些临时文件.配置文件.或者生成文件等,这些文件由于不同的开发端会不一样,如果使用git add . 将所有文件纳入git库中,那么会出现频繁的改动和push ...

  10. 小易邀请你玩一个数字游戏，小易给你一系列的整数。你们俩使用这些整数玩游戏。每次小易会任意说一个数字出来，然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字。 例如： 如果{2,1,2,7}是你有的一系列数，小易说的数字是11.你可以得到方案2+2+7 = 11.如果顽皮的小易想坑你，他说的数字是6，那么你没有办法拼凑出和为6 现在小易给你n个数，让你找出无法从n个数中选取部分求和

    小易邀请你玩一个数字游戏,小易给你一系列的整数.你们俩使用这些整数玩游戏.每次小易会任意说一个数字出来,然后你需要从这一系列数字中选取一部分出来让它们的和等于小易所说的数字. 例如: 如果{2,1,2 ...