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>

一个简单的 php 分页 函数

  • 2008年12月28日 10:22
  • 1KB
  • 下载

JavaScript分页函数

  • 2009年12月05日 13:03
  • 10KB
  • 下载

js分页页码显示逻辑实现的两种方法

第一种:之前在项目中用到的比较笨重的方式,纯代码的形式实现,用到判断,有需要的朋友可作参考,自定义样式就可以实现想要的分页效果。 第二种:用js插件的方式实现分页显示,比较方便。...

方便快捷的PHP长文章分页函数

  • 2011年08月31日 17:52
  • 171KB
  • 下载

Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能

http://www.jianshu.com/p/d14ddd5f2537 需求分析 还是先从试求入手,想想实现这样一个功能需要注意什么、大致流程如何、有哪些应用场景。 表格本身是一种非...

js 分页

  • 2017年11月21日 11:46
  • 22KB
  • 下载

Laravel一个页面里有多个分页并用jQuery pagination.js实现

"{{asset('lib/js/jquery.pagination.js')}}"> //引入该文件前别忘了引入JQUERY库        $(function(){      //这是一个非常简...

简单的js分页

  • 2015年12月15日 11:09
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js分页函数
举报原因:
原因补充:

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