根据数据库的编号,在前端展示的时候进行分页,其实是个数学问题,比如一共有172条数据,设置一页10条数据,问你第41条数据是第几页的?
41/10=5(向上取整)
var count=getMenuA.length;
var pageNum=Math.ceil(count/MAX_COUNT_ITEM);
count是数据库总条目数,MAX_COUNT_ITEM是一页多少条数据,172条数据,一页10条,所以一共是18页,这个18页是怎么算的呢?172/10=18|(向上取整)
当点击页码时,传参页码,要跳转对应页码,并且显示该页码的条目
function goPage(whichID){
if(ma==whichID&&md!=null&&md!=''){
var viewHTMLd='';
var i=1;
var startPage=(Math.floor(md)-1)*MAX_COUNT_ITEM+1;//计算当前页码的开始ID
var finalPage=Math.floor(md)*MAX_COUNT_ITEM;//计算当前页码的结束ID
var viewHTML='<ul class="cm-new-list-ul">';
var viewHTMLm='';
var viewHTMLpage='<div class="cm-page"><ul class="honor-detail-tt">';
var pageTMP='';
var count=0;
$.getJSON(getNewUrl+whichID,function(data){
getMenuC=data.projectsList;
count=getMenuC.length;
getMenuC.map(function(item,data){
if(i>startPage-1&&i<finalPage+1){//输出当前页码的条目
viewHTMLm+='<li><a href="?a='+whichID+'&b='+item.aab101+'"><span>'+item.aab102+'</span><i>'+item.aab112+'</i></a></li>';
}
i++;
});
var pageNum=Math.ceil(count/MAX_COUNT_ITEM);//计算总页数
for(var a=0;a<pageNum;a++){
var ia=a+1;
if(ia==md){//当前加标签class on
pageTMP+='<li class="on"><a href="?a='+whichID+'&pg='+ia+'">'+ia+'</a></li>';
}else{
pageTMP+='<li><a href="?a='+whichID+'&pg='+ia+'">'+ia+'</a></li>';
}
}
$('.cm-content').html(viewHTML+viewHTMLm+'</ul>'+viewHTMLpage+pageTMP+'</ul></div>');
});
}
}
当点击该条目时,要显示该条目的具体信息(页码不刷新)
function detailType(classOnStr,localStr,whichID){
if(ma==whichID&&mb!=null){
var viewHTMLc='';
var getIDarr=new Array();
var IDi=0;
$.getJSON(getNewUrl+whichID,function(data){
getMenuB=data.projectsList;
$(classOnStr).addClass('on');
$('#location-c').html(localStr);
getMenuB.map(function(item,date){
getIDarr[IDi]=item.aab101;
IDi++;
});
IDi=0;
getMenuB.map(function(item,data){
if(item.aab101==mb){
var pre=vuleToID(getIDarr,mb)-1;
var nex=vuleToID(getIDarr,mb)+1;
var pageHTMLc='';
var pageCount=Math.ceil(item.length/MAX_COUNT_ITEM);
if(pre<0){
pageHTMLc='<div class="cm-page"><ul><li class="disabled"><a>上一页</a></li>';
}else{
pageHTMLc='<div class="cm-page"><ul><li class="item"><a href="?a='+whichID+'&b='+getIDarr[pre]+'">上一页</a></li>';
}
if(nex>getIDarr.length-1){
pageHTMLc+='<li class="disabled"><a>下一页</a></li>';
}else{
pageHTMLc+='<li class="item"><a href="?a='+whichID+'&b='+getIDarr[nex]+'">下一页</a></li>';
}
viewHTMLc=viewHTMLc+'<div class="cm-content-title">'+item.aab102+'</div><p align="right">'+item.aab112+'</p><br />'+item.aab103+'<img src="'+imgUrlfix+item.aab109+'"><br /><br /><img src="'+imgUrlfix+item.aab110+'"><br /><br />'+item.aab104+'<img src="'+imgUrlfix+item.aab111+'"><br />'+pageHTMLc+'</ul></div>';
$('.cm-content').html(viewHTMLc);
}
});
});
}
}
在初始加载页码时,就要显示初始页面的内容,并对每个链接绑定好对应的事件
for(var i=0;i<htmlLabel.length;i++){
aboutMenuTypeNews(htmlLabel[i],localHtmlLabel[i],i+1);
detailType(htmlLabel[i],localHtmlLabel[i],i+1);
goPage(i+1);
}
由于在取整时遇到了问题,我没有解决,就采用了先取整再做除法的办法,这里不是很规范