js分页函数

原创 2015年11月20日 21:22:02
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #page a {margin: 10px;}
    </style>
    <script type="text/javascript">
    window.onload = function () {
        page({
            id : 'page',
            nowNum : 9,
            allNum : 10,
            bBtn : false,
            callBack : function(now,all) {
                alert('当前页:' + now +',总共页:'+all);
            }
        })
        function page(opt) {
            if (!opt.id) {return};
            var nowNum = opt.nowNum || 1;
            var allNum = opt.allNum || 5;
            var bBtn = opt.bBtn || false;
            var callBack = opt.callBack || function(){};
            var obj = document.getElementById(opt.id);

            if (allNum >= 6 && nowNum >=5) {
                var a = document.createElement('a');
                a.href = '#1';
                a.innerHTML = '首页';
                obj.appendChild(a)
            };

            if (nowNum >= 2) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum-1);
                a.innerHTML = '上一页';
                obj.appendChild(a)
            };

            if (allNum <= 5) {

                for (var i = 1; i <= allNum; i++) {
                    var a = document.createElement('a');
                    a.href = '#'+i;
                    if (i == nowNum) {
                        a.innerHTML = i;
                    } else {
                        a.innerHTML = '['+ i +']'
                    }

                    obj.appendChild(a)
                };

            }else {
                if (nowNum ==1 || nowNum == 2) {
                    // if (opt.nowNum == 1) {
                        for (var i = 1; i <= 5; i++) {
                            var a = document.createElement('a');
                            a.href = '#'+i;
                            if (i == nowNum) {
                                a.innerHTML = i;
                            } else {
                                a.innerHTML = '['+ (i) +']'
                            }

                            obj.appendChild(a)
                        };
                    // };

                }
                else if(  (allNum - nowNum) <= 1 ) {    //opt.nowNum ==9 || opt.nowNum == 10
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#' + (allNum - 5 + i);
                        // if (i == opt.nowNum) {
                        //  a.innerHTML = opt.allNum - opt.nowNum + 5;
                        // } else {
                        //  a.innerHTML = '['+ (opt.allNum - opt.nowNum + 5) +']'
                        // }
                        if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
                            a.innerHTML = (allNum - 5 + i);
                        }else{
                             a.innerHTML = '['+ (allNum - 5 + i) +']';
                        }

                        obj.appendChild(a)
                    };

                    // oA.href = '#' + (allNum - 5 + i);

                    //    if((allNum - nowNum) == 0 && i==5){
                    //     oA.innerHTML = (allNum - 5 + i);
                    //    }
                    //    else if((allNum - nowNum) == 1 && i==4){
                    //     oA.innerHTML = (allNum - 5 + i);
                    //    }
                    //    else{
                    //     oA.innerHTML = '['+ (allNum - 5 + i) +']';
                    //    }

                }
                else {
                    for (var i = 1; i <= 5; i++) {
                        var a = document.createElement('a');
                        a.href = '#'+(nowNum-3+i);
                        if (i == 3) {
                            a.innerHTML = nowNum-3+i;
                        } else {
                            a.innerHTML = '['+ (nowNum-3+i) +']'
                        }

                        obj.appendChild(a)
                    };
                }

            }

            if ((allNum-nowNum) >= 1) {
                var a = document.createElement('a');
                a.href = '#'+(nowNum+1);
                a.innerHTML = '下一页';
                obj.appendChild(a)
            };
            if (allNum >= 6 && (allNum-nowNum) >=3 ) {
                var a = document.createElement('a');
                a.href = '#'+allNum;
                a.innerHTML = '尾页';
                obj.appendChild(a)
            };
            if (bBtn) {
                callBack(nowNum,allNum);

            };

            var aBtn = obj.getElementsByTagName('a');
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function() {
                    var nowNum = parseInt(this.getAttribute('href').substring(1));

                    obj.innerHTML = '';
                    page({

                     id : opt.id,
                     nowNum : nowNum,
                     allNum : allNum,
                     bBtn : true,
                     callBack : callBack

                    });
                    // callBack(nowNum,allNum);
                    return false;
                }

            };
        }
    }
    </script>
</head>
<body>
    <div id="page">
        <!-- <a href="#10">首页</a>
        <a href="#1">上一页</a>
        <a href="#2">[2]</a>
        <a href="#3">[3]</a>
        <a href="#4">4</a>
        <a href="#5">[5]</a>
        <a href="#6">[6]</a>
        <a href="#7">下一页</a>
        <a href="#10">尾页</a> -->
    </div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JavaScript分页函数

  • 2009-12-05 13:03
  • 10KB
  • 下载

如何抓取Js动态生成数据且以滚动页面方式分页的网页

当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网站:http://toutiao.com/ 我们...

js假分页(tabel)

公司名称:   公司地址:   营业执照号:     公司名称 联系电话(座机)  公司地址 公司法人 营业执照号 注册资本 资质证书编号 发证机关 公司邮箱 公司传真 操作员...

js分页带省略号

  • 2017-08-18 10:23
  • 118KB
  • 下载

分页js

jquery.pagination.js分页

序言 这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。 友情提示下:我有一片博客是用着个js实现的无...

简单的js分页

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)