Jquery+CSS实现分页

原创 2016年05月31日 14:21:01
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的不用说大家知道。

DIV/CSS+Jquery自己写的分页标签

一个简单的分页标签的样式 1》html 图表 数据 查询 1111111 2...

JSP自定义标签开发(八)—— xx.tag自定义标签开发之分页标签(jquery + div +css 美化)

去年刚出从学校里走出来,

html+css实现简单分页页码效果

  • 2015年04月19日 17:59
  • 1KB
  • 下载

jquery实现分页组件

  • 2017年11月17日 16:28
  • 32KB
  • 下载

网页分页实现(css+js)

最近通过自己的摸索,通过css和js实现了一个简单的网页分页显示功能,现在分享给大家。有什么不足和改进之处,欢迎大家留言一起讨论,一起学习。...
  • lms1719
  • lms1719
  • 2015年08月21日 10:10
  • 451

jquery 实现分页条显示

  • 2013年10月18日 15:22
  • 4KB
  • 下载

jquery实现分页

  • 2015年04月21日 10:42
  • 36KB
  • 下载

JQuery实现分页功能

使用JQuery实现分页功能。 1、分页栏HTML码 2、 CSS样式文件 .g-cf:after {clear: both;content: "";displ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery+CSS实现分页
举报原因:
原因补充:

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