前言
最近的项目需要添加一个分页导航的功能，没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。
内容
下图为首次加载后的效果，默认显示5页，
当点击下一页时将选中页面的页码置于中间
下面让我们来看看实现的代码
第一部分是在页面显示内容的处理
functionSetListPage(){
$.ajax({
type:"GET",
url:"ajax/PhoneList.ashx?",
datatype:'json',
success:function(data,textStatus){
varli_list="";
if(data!=""){
varcc=jQuery.parseJSON(data);//转换Json对象
varpagesize=6;//设置每页显示数
varpagecount=Math.ceil(cc.length/pagesize);//获取页数
SetPageCount(pagecount);//设置跳转页签
for(varj=0,l=pagecount;jcc.length){
rowcount=cc.length;
}
for(vari=index;i";
li_list+="| "+PhoneNO+" | ";
li_list+=""+Email+" | ";
li_list+="";
}
li_list+="";
}
}
}
});
}
第二部分是动态的设置页码并添加页码导航的方法
functionSetPageCount(count){
if(count>0){//设置动态页码
varli_list="";
li_list+="";
li_list+="上一页";
li_list+="";
for(vari=2;i<=count;i++){
if(i<=5){
li_list+=""+i+"";
}else{
li_list+=""+i+"";
}
}
li_list+="
";
li_list+="下一页";
li_list+="";
if(li_list!=null&&li_list.length>0){
$("#PhonePageCount").html(li_list);
$('.01pageIndexa').click(function(){//添加添加分页导航的事件
varpagecounts=$('.01pageIndexa').length;
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
varindex=$(this).parent().index()||0;
if(1table').siblings().hide();
$('#phonelist>table').eq(index).show();
})
$('#01preage').click(function(){
varcurrentPageIndex=$('.01pageIndex').find("a[class$='active']").parent().index();
varpagecounts=$('.01pageIndexa').length;
if(currentPageIndex>0){
varthisobj=$('.01pageIndexa').eq(currentPageIndex-1);
thisobj.addClass('active');
thisobj.parent().siblings().find('a').removeClass('active');
if(0table').siblings().hide();
$('#phonelist>table').eq(currentPageIndex-1).show();
}
})
$('#01nextage').click(function(){
varcurrentPageIndex=$('.01pageIndex').find("a[class$='active']").parent().index();
varpagecount=$('.01pageIndexa').length-1;
varpagecounts=$('.01pageIndexa').length;
if(pagecount>currentPageIndex){
varthisobj=$('.01pageIndex').eq(currentPageIndex+1);
thisobj.find('a').addClass('active');
thisobj.siblings().find('a').removeClass('active');
if(0table').eq(currentPageIndex+1).show();
}
})
}
}
}
小结
一个小小的功能，在实现的过程中并不容易不断的调试和优化才让这样的需求得到了合理的实现。但敲代码中也让我更多的感受到了页面导航中所需要考虑到的多元素设计。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
