关闭

Jquery+CSS实现分页

88人阅读 评论(0) 收藏 举报
1.首先是JQ的代码,就一个方法:
setpage = function(pn,option,num,$$){
if($$&&typeof($$)=="object")
_$=function(s){return window.$(s,$$);};
else _$=window.$;
num=num||30;
var p=_$("#info").attr("total"),
pagecount = 10,
$pages = _$("#pages");
if(p>0)_$("#info").parent().show();
else return;
$pages.empty();
_$(".page-current").html("第 "+pn+" 页");
p=p%num==0?p/num:p/num-p%num/num+1;
    if(p>1){
    _$("#num").html("<font >/每页"+num+"条</font>");
    }else{
    _$("#info").css({marginTop:5});
    _$("#last_page,#n_page,#first_page,#p_page,.page-sel").hide();
    return;
    }
    var pr=pn==1?1:pn-1;
    var ne=pn==p?p:pn+1;
    _$("#first_page").attr("onclick","javascript:"+option+"(1)");
    _$("#last_page").attr("onclick","javascript:"+option+"("+p+")");
    if(pn!=p){
    _$("#last_page").removeClass("disabled").show();
    _$("#n_page").attr("onclick","javascript:"+option+"("+ne+")").removeClass("disabled").show();
    }else{
    _$("#n_page,#last_page").hide();
    }
    if(pn!=1){
    _$("#first_page").removeClass("disabled").show();
    _$("#p_page").attr("onclick","javascript:"+option+"("+pr+")").removeClass("disabled").show();
    }
    else{
    _$("#p_page,#first_page").hide();
    }
    if(p<=10){
    for(var i=1;i<=p;i++)
aped(i);
    }else{
    if(pn<=pagecount/2)
    for(var i=1;i<=pagecount;i++)
    aped(i);
        else{
        var end=pn>p-pagecount/2?p:pn+pagecount/2;
        for(var i=pn-pagecount/2-1;i<=end;i++){
        aped(i);
        }
        }
    }
    _$("#p"+pn).removeClass("shadow2").addClass("ac");
//    _$("#up-pages").html(_$("#pages").parent().clone());


    function aped(i){
    $pages.append("<a id='p"+i+"' onclick='javascript:"+option+"("+i+")' class='page'>第 "+i+" 页</a>");
    }
};

----------------------------------------------------------------------------
2.接下来是CSS


body {
margin: 0;
font: 12px Rockwell,Century Gothic,Maiandra GD,Verdana, Geneva, sans-serif;
line-height: 25px;
background-color: #BEE1F5;
background-image: url("http://img.t.sinajs.cn/t5/skin/skin048/images/body_repeat.png?id=1365497051705");
background-repeat: repeat-x;
}


.page-sel{
position: relative;
display: inline-block;
cursor: pointer;
}
.pager a{
text-decoration:none !important;
}
.np-page{
cursor:pointer;
width:45px;
padding: 2px 5px;
color: #222;
text-align:center;
background-color:#F7F7F7;
border:1px solid #DDD;
border-radius:2px;
display:inline;
}
.np-page#p_page,.np-page#last_page{
margin-left: 5px;
}
.np-page:hover{
background-color:#FFF;
}
.np-page.disabled{
cursor:default;
color:rgb(222,222,222);
}
.page-current{
padding: 0 10px;
color: #0367AA;
}
#pages{
position: absolute;
background: #FFF;
bottom: 25px;
border: 1px solid #CCC;
display:none;
}
.page-sel:hover #pages{
display:block;
}
.page.disabled{
cursor:default;
color:black;
border:0px;
}
a.page{
cursor:pointer;
text-align:center;
display:block;
color: #222;
padding: 0 10px;
white-space: nowrap;
}
a.page:hover{
background-color: #EEE;
}
a.page.ac{
background-color: #FFF;
cursor:default;
color:#999;
}
#info{
display: inline-block;
padding: 5px 0px;
line-height: 16px;
background:white;
float: right;
}
============================================================
最后是html代码,你只需要将他include到你需要显示页面的地方,注意,其中的{{ total }}是记录是后台返回的
总记录条数


<div style="padding-top:5px;margin-left: 10px;width: 96%;">
<a id="first_page" class="np-page">首页</a>
<a id="p_page" class="np-page">上一页</a>

<span class="page-sel">
<span class="page-current"></span>
<div id="pages"></div>
</span>

<a id="n_page" class="np-page">下一页</a>
<a id="last_page" class="np-page">尾页</a>
<span id="info" total="{{ total }}">共{{ total }}条<span id="num"></span></span>
<div class="clear"></div>
</div>


=======================================================最后是调用方法
在每个页面初始化后调用 :JQ可以直接这样写:
$(function(){
setpage({{pn}},"setBillpage",10,$);
})

参数讲解:
1.{{pn }},从后台返回的当前的页数,
2."setBillpage"是自定义的用来请求分页数据的方法名,如下:
function setBillpage(pn){
var pn = pn||1;
var  st = $("input[name=bill_st]:checked").val();
$.get("/bill_manage.php?action=search&billstatus="+st+"&pn="+pn,function(data){
$("#bills-data").html(data);
setpage(pn,"setBillpage",10,$);
});
}


3.    10  表示每一页需要显示的记录条数,需要和SQL里面的Limit保持一致
4.    $ 这个会JQ的不用说大家知道。

0
0

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