jQuery实现的分页功能示例
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考，具体如下：
1、分页栏HTML码
<divclass="g-cfg-pagerwp"> <divstyle="visibility:hidden"class="g-pager"> </div> </div>
2、CSS样式文件
.g-cf:after{clear:both;content:"";display:table;}
.g-cf{zoom:1;}
/*分页*/
.g-pager{text-align:center;color:#111111;font:12px/1.5emArial,Tahoma;float:right;}
.g-pagera,.g-pagerinput{cursor:pointer;border:solid1px#0F71BE;padding:1px4px;color:#0F71BE;margin:02px;vertical-align:middle;}
.g-pagera.cur,.g-pagera:hover{background-color:#0F71BE;color:#fff}
.g-pagera.no{border-color:#A3A3A3;color:#A3A3A3;background-color:#E4F2F9}
.g-pagerspan{margin-right:10px;}
.g-pagerinput{cursor:default;width:28px;padding:1px2px;}
.g-pagerwp{height:23px;line-height:23px;padding:5px;margin-bottom:10px;border:1pxsolid#DDDDDD;}
.g-pagerwp.g-btn{vertical-align:top}
3、JS脚本文件
①引用JQuery和分页脚本
<scriptsrc="/js/common/jquery-1.6.2.js"type="text/javascript"></script> <scriptsrc="/js/jquery.PageBar.js"type="text/javascript"></script>
②编写jquery.PageBar.js脚本
/**************************/
//JQuery分页栏
/**************************/
$.fn.pageBar=function(options){
varconfigs={
PageIndex:1,
PageSize:15,
TotalPage:0,
RecordCount:0,
showPageCount:4,
onPageClick:function(pageIndex){
returnfalse;//默认的翻页事件
}
}
$.extend(configs,options);
vartmp="",
i=0,
j=0,
a=0,
b=0,
totalpage=parseInt(configs.RecordCount/configs.PageSize);
totalpage=configs.RecordCount%configs.PageSize>0?totalpage+1:totalpage;
tmp+="<span>总记录数："+configs.RecordCount+"</span>";
tmp+="<span>页数："+totalpage+"</span>";
if(configs.PageIndex>1){
tmp+="<a><</a>"
}else{
tmp+="<aclass=\"no\"><</a>"
}
tmp+="<a>1</a>";
if(totalpage>configs.showPageCount+1){
if(configs.PageIndex<=configs.showPageCount){
i=2;
j=i+configs.showPageCount;
a=1;
}elseif(configs.PageIndex>totalpage-configs.showPageCount){
i=totalpage-configs.showPageCount;
j=totalpage;
b=1;
}else{
vark=parseInt((configs.showPageCount-1)/2);
i=configs.PageIndex-k;
j=configs.PageIndex+k+1;
a=1;
b=1;
if((configs.showPageCount-1)%2){
i-=1
}
}
}
else{
i=2;
j=totalpage;
}
if(b){
tmp+="..."
}
for(;i<j;i++){
tmp+="<a>"+i+"</a>"
}
if(a){
tmp+="..."
}
if(totalpage>1){
tmp+="<a>"+totalpage+"</a>"
}
if(configs.PageIndex<totalpage){
tmp+="<a>></a>"
}else{
tmp+="<aclass=\"no\">></a>"
}
tmp+="<inputtype=\"text\"/><a>Go</a>"
varpager=this.html(tmp)
varindex=pager.children('input')[0]
pager.children('a').click(function(){
varcls=$(this).attr('class');
if(this.innerHTML=='<'){
if(cls!='no'){
configs.onPageClick(configs.PageIndex-2)
}
}elseif(this.innerHTML=='>'){
if(cls!='no'){
configs.onPageClick(configs.PageIndex)
}
}elseif(this.innerHTML=='Go'){
if(!isNaN(index.value)){
varindexvalue=parseInt(index.value);
indexvalue=indexvalue<1?1:indexvalue
indexvalue=indexvalue>totalpage?totalpage:indexvalue
configs.onPageClick(indexvalue-1)
}
}else{
if(cls!='cur'){
configs.onPageClick(parseInt(this.innerHTML)-1)
}
}
}).each(function(){
if(configs.PageIndex==parseInt(this.innerHTML)){
$(this).addClass('cur')
}
})
}
③初始化使用
$(document).ready(function(){
//设置分页信息
varpageOptions={
AllowPaging:true,
PageIndex:1,//设置当前页码
PageSize:15,//设置分页大小
RecordCount:1092,//设置数据总数
TotalPage:73,//设置总页数
showPageCount:4,
onPageClick:function(pageIndex){
alert("您点击了第"+parseInt(pageIndex+1)+"页");//自定义您的翻页事件
returnfalse;
}
}
//初始化分页栏
$('.g-pagerwp.g-pager').css('visibility','visible').pageBar(pageOptions);
})
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。