话不多少，直接上代码

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. 使用HIBERNATE的SQL查询并将结果集自动转换成POJO

    在某些场合下,我们可能想使用HIBERNATE的框架提供的SQL查询接口,但是,由于实体没有做映射,HIBERNATE不能把结果集转换成你想要的List<POJO>,本文讨论如何在这种情况 ...

  2. 【Spec for GS5】不要嘲笑程序员不懂烂漫

    // // main.cpp // 生日快乐 // // Created by wasdns on 16/11/21. // Copyright © 2016年 wasdns. All rights ...

  3. window下mysql的1053错误

    tmp文件数目过多 导致启动为1053错误 这个时候有两种方法 清空tmp目录 更改mysql的tmp目录 在my.ini中更改 [mysqld] tmpdir="d:/mysql_tmp& ...

  4. Linux shell 变量 数学 运算

    Abstract : 1)  Linux shell 中使用 let , [ ] ,(( )) 三种运算符操作 shell 变量进行简单的基本运算: 2)Linux shell 中使用 expr 与 ...

  5. BAE3.0上的java+tomcat+hibernate代码发布

    在BAE上使用hibernate说起来也简单,但因为一个不小心,耽误了好几个小时. 百度文档中有说: http://developer.baidu.com/wiki/index.php?title=d ...

  6. Array原型链添加“遍历”方法

    <script> //1.在我们之前的项目里向原型链中集成方法时大多代码分析不严密,有时间我在这里会做详细分析; Array.prototype.each = function(fn) { ...

  7. Wordpress引入多说插件

    多说为Wordpress制作了插件,按照以下步骤,快速让你的网站迅速使用多说! 1.下载插件:https://wordpress.org/plugins/duoshuo/ 或在WordPress后台“ ...

  8. Javascript实现提示错误的信息直接出现在输入框后

    可以在输入框后加个<span id="error"></span>,当验证错误时这样处理document.getElementById('error').i ...

  9. UITableView & UITableViewController

    内容概要: 本文先讲解了UITableView概述,然后主要从应用方面讲解了UITableViewController(包括add.delete.move单元cell的操作,以及UITableView ...

  10. ecshop transport.js 和 jquery 冲突解决办法

    您提供一个简单的解决transport.js 和 jquery 方法: 在 page_header.lbi 库文件中加入如下代码,注意操作顺序: 1.先导入transport.js  文件 {inse ...