HTML前台分页样例

来源：互联网发布：国产外设品牌知乎编辑：程序博客网时间：2024/04/28 02:28
自己制作的一个分页示例，贴出来和大家分享一下：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="renderer" content="webkit" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>Document</title><style>.rptIntfPortlet .portletBody .showSection{font-size: 12px;}.rptIntfPortlet .portletBody .showSection .showBody .showMore span.input span{display: inline-block;border:1px solid #999;padding: 0px 8px;margin: 0px 2px;color: #3B5998;background-color:white;text-decoration: none;height: 22px;line-height: 22px;border-radius: 3px;cursor: pointer;}.hidden{display: none;}</style></head><body><div class="rptIntfPortlet"><div class="portletBody"><div class="searchSection"><div class="searchBody"><label class="beginTime">开始时间<input type="date" placeholder="请输入开始时间"></label><label class="endTime">结束时间<input type="date" placeholder="请输入结束时间"></label><label class="submitTime"><input type="button" value="查询" onclick="selectAll()"></label></div></div><div class="showSection"><div class="showBody"><div class="showMessage"></div><div class="showMore"><span class="totalNumber">0条</span><span class="totalPage">共0页</span><span class="before input hidden"><span mark="1" onclick="servlet(this)">首页</span><span mark="1" onclick="servlet(this)">上一页</span></span><span class="content input"><span mark="1" onclick="servlet(this)">1</span></span><span class="after input"><span mark="1" onclick="servlet(this)">下一页</span><span mark="1" onclick="servlet(this)">尾页</span></span></div></div></div></div></div></body><script src="jquery-1.8.3.min.js"></script><script>var pageNumber=10;          //一页显示多少条数据var arrayLength=5;          //多少页码形成一组var totalPage=1;   //总共的页码数var indexPage=1;   //当前的页码数var totalArrayPage=1;    //共多少组页码//点击页码触发的动作function servlet(item){indexPage=parseInt($(item).attr("mark"));console.log(indexPage);setInput();}//查询时触发事件function selectAll(){var beginTime=$(".rptIntfPortlet .searchBody .beginTime input").val();var endTime=$(".rptIntfPortlet .searchBody .endTime input").val();console.log("开始时间为："+beginTime);console.log("结束时间为："+endTime);//输入值是否为完整的年月日时间//判断结束时间是否大于开始时间//通过ajax获取数据，var totalNumber=191;   //值为返回数据的长度totalPage=Math.ceil(totalNumber/pageNumber);totalArrayPage=Math.ceil(totalPage/arrayLength);//在页面上设置总页数和结果总数量$(".rptIntfPortlet .showSection .showMore .totalNumber").text(totalNumber+"条");$(".rptIntfPortlet .showSection .showMore .totalPage").text("共"+totalPage+"页");//设置尾页的值$(".rptIntfPortlet .showSection .showMore span.after span:last-child").attr("mark",totalPage);console.log("页码数为："+totalPage);setInput();}//分组页码显示function setInput(){//防止当前页码大于最大页码if(indexPage>totalPage){indexPage=totalPage;}//防止当前页码小于1if(indexPage<1){indexPage=1;}var htmlCode="";var indexArrayPage=Math.ceil(indexPage/arrayLength);    //当前下标是第几组页码var beforeArrayPage=0;      //倒数第二组的第一个下标var afterArrayPage=0;//控制首页、上一页;下一页、尾页的显示和隐藏$(".rptIntfPortlet .showSection .showMore span.input").removeClass("hidden");if(indexPage==1){$(".rptIntfPortlet .showSection .showMore span.before").addClass("hidden");}else if(indexPage==totalPage){$(".rptIntfPortlet .showSection .showMore span.after").addClass("hidden");}else{}//控制上一页、下一页中的值$(".rptIntfPortlet .showSection .showMore span.before span:last-child").attr("mark",(indexPage-1));$(".rptIntfPortlet .showSection .showMore span.after span:first-child").attr("mark",(indexPage+1));//控制页码的展示if(totalPage<=arrayLength){for(var i=1;i<=totalPage;i++){htmlCode+='<span  onclick="servlet(this)" mark="'+i+'">'+i+'</span>';}$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);}else{if(indexArrayPage==1){for(var i=1;i<=arrayLength;i++){htmlCode+='<span  onclick="servlet(this)" mark="'+i+'">'+i+'</span>';}htmlCode+='<span  onclick="servlet(this)" mark="'+(arrayLength+1)+'">...</span>';$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);}else if(indexArrayPage==totalArrayPage){beforeArrayPage=(totalArrayPage-1)*arrayLength;htmlCode+='<span onclick="servlet(this)" mark="'+beforeArrayPage+'">...</span>';for(var i=(beforeArrayPage+1);i<=totalPage;i++){htmlCode+='<span onclick="servlet(this)" mark="'+i+'">'+i+'</span>';}$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);}else{beforeArrayPage=(indexArrayPage-1)*arrayLength;afterArrayPage=indexArrayPage*arrayLength+1;htmlCode+='<span onclick="servlet(this)" mark="'+beforeArrayPage+'">...</span>';for(var i=(beforeArrayPage+1);i<afterArrayPage;i++){htmlCode+='<span onclick="servlet(this)" mark="'+i+'">'+i+'</span>';}htmlCode+='<span onclick="servlet(this)" mark="'+afterArrayPage+'">...</span>';$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);}}}</script></html>
备注：因为此处分页是和查询相关联的，打开页面后需先点击一下【查询】按钮
截图如下：
阅读全文
1 0