分页界面

longlovexk

于 2012-11-22 12:16:41 发布

阅读量106

点赞数

分类专栏： jsp javascript 文章标签：分页

jsp 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.firs{ color:#f00; margin-left:5px; cursor:pointer}
.last{ color:green; margin-left:5px; cursor:pointer}
.prev{ color:#fc0; margin-left:5px;cursor:pointer }
.next{ color:#fcc; margin-left:5px; cursor:pointer}
.norm{ margin-left:5px; cursor:pointer}
.sele{ margin-left:5px;font-weight:bold;cursor:pointer}
</style>

</head>

function Pager() {
var o =this;

    o.setting = {
        p: 1,    //当前锁定页
        pc: 0,   //总页数
        size: 5, //每页的页码数量
        fun: function (p) { } //外部调用的function
    }

    o.css = {
        firs: 'firs',//首页 className
        last: 'last',//末页 className
        prev: 'prev',//上一页 className
        next: 'next',//下一页 className
        norm: 'norm',//未选中页 className
        sele: 'sele' //选中页 className
    }

    var getSpan = function () {
        return document.createElement("span");
    }

    var getP = function (p, txt) {
        txt = txt || p;
        var _span = getSpan();
        _span.innerHTML = txt;
        _span.setAttribute("p", p);
        _span.onclick = function () {
   o.setting.p = p;
            o.setting.fun(this.getAttribute("p"));
        }

return _span;
}

//获得当前设置下的页码 html 元素
    o.get = function () {
        var _docFrag = document.createDocumentFragment();
        //上一页
        if (o.setting.p > 1) {
            var _firstP = getP(1, '首页');
            _firstP.className = o.css.firs;
            _docFrag.appendChild(_firstP);

            var _prevP = getP(o.setting.p - 1, '上一页');
            _prevP.className = o.css.prev;
            _docFrag.appendChild(_prevP);
        }

        if (o.setting.pc < o.setting.size) {
            for (var p = 1; p <= o.setting.pc; p++) {
                var _span = getCSSP(p);
                _docFrag.appendChild(_span);
            }

        } else {

            var star_p = o.setting.p - (o.setting.size - 1) / 2;
   if(star_p>0){
    for (var i = 0; i < o.setting.size; i++) {
     var p = star_p + i;
     if (p <= o.setting.pc) {
      var _span = getCSSP(p);
      _docFrag.appendChild(_span);
     }
    }
   }else{
    for(var p = 1; p<= o.setting.size;p++){
     var _span = getCSSP(p);
     _docFrag.appendChild(_span);
    }
   }
        }

        //下一页
        if (o.setting.p < o.setting.pc) {
            var _nextP = getP(o.setting.p + 1, '下一页');
            _nextP.className = o.css.next;
            _docFrag.appendChild(_nextP);

            var _lastP = getP(o.setting.pc, '末页');
            _lastP.className = o.css.last;
            _docFrag.appendChild(_lastP);
        }

return _docFrag;
}
}

//demo
var panel = document.getElementById('panel');
var p = new Pager();
p.setting.p = 20; //设置当前锁定页为 20
p.setting.pc = 30; //设置总页数为 30
p.setting.fun = function(p_num){ //当点击某页的时候触发的函数
//ajax.ashx?action=getmsg&p=p_num

panel.innerHTML = '';
panel.appendChild(p.get());
}
panel.appendChild(p.get()); //把页码append 到容器中

</script>

</body>
</html>

longlovexk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页界面

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
复制链接

扫一扫