一个简单好用的原生分页插件

1. pagetion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <title>分页标签</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style>
        body{
            font-size: 12px;
            color: #333333;
        }
        a{
            margin :2px;
        }

        .selected{
            background-color:#FFFFCC;
            padding:2px;
            border:1px solid #999999;
        }

    </style>

</head>
<body>
<div id="paging"></div>

<script type="text/javascript">

    PagingBar = function(config){
        //当前分页标签产生的HTML代码渲染的目标对象
        this.render;
        //总记录数
        this.total;
        //一共显示多少页
        this.page=7;

        //每页记录数
        this.size = 20;

        //当前第几页
        this.current = 1;

        for(var i in config){
            this[i]=config[i];
        }

        this.init=function(){
            this.render=(typeof this.render==="string")?document.getElementById(this.render):this.render;
        }

        this.init();

        this.createHref=function(html,index){
            var href = document.createElement("A");
            href.href="javascript:void(0);";
            href.innerText = html;
            if(this.current===index){
                href.className="selected";
            }


            href.onclick = function(paging,ind){
                return function(){
                    paging.current = ind;
                    paging.html();
                    //console.log(paging.current);
                }
            }(this,index);
            return href;
        };


        this.html=function(){
            this.render.innerHTML="";
            //var str= new StringBuffer();
            //计算总页数
            var totalPage =this.total%this.size===0?this.total/this.size:this.total%this.size+1;

            /*var text=document.createTextNode("共"+this.total+"条 每页"+this.size+"条 共"+totalPage+"页");
             text.appendData(" 当前第"+this.current+"页"+((this.current-1)*this.size+1)+"-"+(this.current*this.size)+" 条 ");
             this.render.appendChild(text);*/

            if(this.current > 1) {
                this.render.appendChild(this.createHref("首页",1));
                this.render.appendChild(this.createHref("上一页",this.current-1));
            }else{
                text = document.createTextNode("首页 上一页");
                this.render.appendChild(text);
            }
            //显示中间数字页 7 中 4 =8 4 7-1 6/3+1
            //2 < 4
            var m=(this.page%2===0?this.page/2:(this.page-1)/2+1);
            //当当前页数<每页多少页/2 的时候，点击不需要改变数字
            //当总记录数-当前页数>每页记录数/2时候，点击时不需要改变数字
            var start;
            var end;
            //1,2,3,4
            if((this.current<= m) || totalPage-this.current <= m) {
                //当
                var t=totalPage<this.page?0:totalPage-this.page;
                var start =this.current<=m?0:t;
                var end = start+this.page>=totalPage?totalPage:start+this.page;
            }else{
                var start =this.current-m;
                var end = start+this.page;
            }

            for(var i = start + 1; i <= end; i++){
                this.render.appendChild(this.createHref(i, i));
            }

            if(this.current < totalPage){
                this.render.appendChild(this.createHref("下一页",this.current + 1));
                this.render.appendChild(this.createHref("尾页",totalPage));
            } else {
                text = document.createTextNode("下一页 尾页");
                this.render.appendChild(text);
            }
        }

    };

    var pb = new PagingBar({
        total:300,
        page: 7,
        current: 1,
        render: 'paging'
    });

    pb.html();

</script>
</body>
</html>
一个简单好用的原生分页插件

猜你喜欢
