话不多少，直接上代码

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. UVALive 2635 匈牙利算法

    题意 给出k块地 规模n*m 需要在每块地中找至多一块h*w的地 这些地中如果包含字母 只能包含一种字母 如果一块地中选地使用了A 其余的地就不能使用A 但是全0可以重复 问 最后能最多选出来多少块地 ...

  2. Frenetic Python实验(二)

    实验3 packet_in_out 目的:模拟一个普通的双端口中继器. This application implements a very simple 2 port repeater where ...

  3. MySQL binlog-do-db选项是危险的

    很多人通过 binlog-do-db, binlog-ignore-db, replicate-do-db 和   replicate-ignore-db 来过滤复制(某些数据库), 尽管有些使用, ...

  4. java中重载和覆盖(又称重写)的区别

    初次见到这两个单词并没有什么特别的感觉,但是时间长了,却发现书上一会儿用override,一会儿又用overload,搞得我的迷迷糊.于是就做了个总结,希望能对和我一样对这两个概念模糊不清的网友有一个 ...

  5. 【转】Java 5种字符串拼接方式性能比较。

    最近写一个东东,可能会考虑到字符串拼接,想了几种方法,但对性能未知,于是用Junit写了个单元测试. 代码如下: import java.util.ArrayList; import java.uti ...

  6. 深入了解Windows句柄到底是什么

    深入了解Windows句柄到底是什么 http://blog.csdn.net/wenzhou1219/article/details/17659485 总是有新入门的Windows程序员问我Wind ...

  7. PDO知识

    PDO: 一.含义: 数据访问抽象层 二.作用 :通过PDO能够访问其它的数据库 三. 用法: 1.造对象 ①$dsn="mysql:dbname=zz;host=localhost&quo ...

  8. 字典型转换为JSON数据

    一)将NSDictionary转换成为NSData类型 NSDictionary *tempDict=[[NSDictionary alloc] initWithObjectsAndKeys:@&qu ...

  9. Selenium2学习-008-WebUI自动化实战实例-006-易迅登录之 frame 处理

    此文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,在因 frame 标签导致页面定位失败,提示 NoSuchElementException 时的,页面元素定位前的 fram ...

  10. windows下memcache安装及配置

    1.安装memcached服务,链接为http://i.cnblogs.com/Files.aspx, 下载解压后放在一个文件夹下,在开始搜索中输入cmd, 进入cmd黑框,cd 路径,进入memca ...