Jquery+CSS实现分页

最新推荐文章于 2024-04-09 21:59:05 发布

zhanqixuan22

最新推荐文章于 2024-04-09 21:59:05 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhanqixuan22/article/details/51545392

本文介绍了一个基于JQuery的分页插件实现方法，包括JavaScript代码、CSS样式及HTML结构。通过自定义方法实现了分页导航及数据加载功能，并提供了详细的调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 }}是记录是后台返回的

总记录条数

</span>

<span id="info" total="{{ total }}">共{{ total }}条<span id="num"></span></span>

</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的不用说大家知道。