关闭

js分页函数

标签: js分页
104人阅读 评论(0) 收藏 举报
分类:
<!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23449次
    • 积分:830
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:8篇
    • 译文:0篇
    • 评论:1条