网页文章列表分页码制作

来源：互联网发布：手机图像对比软件编辑：程序博客网时间：2024/05/29 17:17

在网页的文章，数据列表中经常用到分页功能，制作一个通用的页码并对其封装在我们的开发中可以减少重复的工作量。下面开始页码功能制作。

首先看下页码的界面：

数据量较多的页码：

没有数据时的页码：

封装的代码如下，只需将HTML代码复制到对应的页码区域，引用CSS和JavaScript代码，然后给出三个参数（即num，total，page）即可自动生成页码。

HTML代码：num为一页多少条数据，total为总共多少条数据，page为当前页码

<div class="pagelist"><div><div class="l-btns"><span>显示</span><input name="num" value="${num}"><span>条/页</span></div><div class="default"><span class="total">${total}</span><span class="current">${page}</span></div></div></div>

CSS代码：

.pagelist{clear:both;display:block;margin:20px 0 10px 1px;min-height:30px;float:left;position:relative;left:50%;}.pagelist > div{position:relative;left:-50%;}.pagelist .l-btns{display:block;float:left;margin:2px 5px 0 -1px;padding:0 10px;border:1px solid #dbdbdb;    height:28px;overflow:hidden;}.pagelist .l-btns span{font-size:12px;color:#333;line-height:28px;}.pagelist .l-btns input{display:inline-block;margin:0 5px;padding:0 5px;border:1px solid #dbdbdb;    border-top:0;border-bottom:0;width:30px;height:28px;line-height:28px;font-size:12px;color:#333;text-align:center;vertical-align:top;overflow:hidden;outline:none;}.pagelist .default{font-family:"Microsoft YaHei",Verdana;font-size:12px;float:left;}.pagelist .default a,.pagelist .default span{display:block;float:left;margin:2px 5px 0 4px;padding: 4px 12px;line-height:20px;    height:20px;border:1px solid #e1e1e1;background:#fff;color:#333;text-decoration:none;}.pagelist .default span:first-child{border-left: 1px solid #e1e1e1;}.pagelist .default span.disabled{color:#999;background:#fff;}.pagelist .default span.current,.pagelist .default a:hover{color:#fff;background:#488FCD;border-color:#488FCD;}.pagelist .default a:hover{cursor:pointer;}

JavaScript代码：

$(function(){//获取三项数据，总数量，当前标记位置var total = parseInt($(".pagelist .default .total").html());var current = parseInt($(".pagelist .default .current").html());var pageIndex = parseInt($(".pagelist .l-btns input").val());if(pageIndex <= 0){pageIndex = 10;//默认10条}var pageNum = parseInt(total/pageIndex) + (total%pageIndex>0 ? 1 : 0);//将total转为页码数if(pageNum < 0){pageNum = 0;//若总数量小于0错误，则附加为1}if(current > pageNum && pageNum > 0){current = pageNum;//若超出范围，则附加为最后一个}else if(current <= 0){current = 1;}var html = "<input type='hidden' name='page' value='"+current+"' />";var min = current - 2;var max = current + 2;if(current == 1 && pageNum > 0){//当前为第一个html += "<span class=\"disabled\">«上一页</span>";}else if(pageNum > 0){html += "<a page=\""+(current-1)+"\">«上一页</a>";}if(min <= 1){max = max - min + 2;}if(max - pageNum >= 0){min = min - (max - pageNum) - 1;}if(min <= 1){min = 1;}else{html += "<a page=\"1\">1</a>";if(min > 2){html += "<span>...</span>";}}for(var i=min; i<=max && i<=pageNum; i++){if(i == current){html += "<span class=\"current\">"+i+"</span>";}else{html += "<a page=\""+i+"\">"+i+"</a>";}}if(max < pageNum){if(max <= pageNum - 2){html += "<span>...</span>";}html += "<a page=\""+pageNum+"\">"+pageNum+"</a>";}if(current == pageNum && pageNum > 0){//当前为最后一个html += "<span class=\"disabled\">下一页»</span>";}else if(pageNum > 0){html += "<a page=\""+(current + 1)+"\">下一页»</a>";}html += "<span>共"+total+"记录</span>";//数据总数$(".pagelist .default").html(html);});

0 0