`
Longmanfei
  • 浏览: 46787 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仿谷歌分页的“兔”种算法(上)

阅读更多

首先我们来分析一下谷歌分页的实现,根据是实现来计算出他的算法,我们在这里呢,只实现每屏最大显示数据位六页:如                                    

                                                   1 2 3 当前页是1 1 2 3

                                                1 2 3 4             当前页是2      起始值1  未页 4
                                                1 2 3 4 5          当前页是3      起始值1  未页 5
                                                1 2 3 4 5 6       当前页是4      起始值1  未页 6   

      1.首先我们先实现开始时显示三页并且当前页不可点击,当点击第二页是出现第四页以此类推        从上图得知 当前页小于等于4时  起始页为1  末页=当前页+2

startindex=1;//为每屏显示的页数的起始索引 endindex=nowpage+2;;//为每屏显示的页数的结束索引,nowpage当然就是当前页了

注意: 求和值后的endindex 如果endindex大于总页数

那么: this.endindex=this.countpage;

当点击第2页的时候的效果

 当点击第3页时

 当点击第4页时我们出来第六页,好现在已经是每屏显示的最大条数(假如我们现在的总页数超过六页那么我们看第5页)

那么当超过最大显示页数时,是什么样的呢,我们先分析一下

 

当大于4时

2 3 4 5 6 7         当前页是5        起始值是2    未页 7
3 4 5 6 7 8         当前页是6        起始值是3    未页 8
4 5 6 7 8 9         当前页是7        起始值是4    未页 9
 5 6 7 8 9 10       当前页是8        起始值是5    未页 10
 

从试图当中我们不难看出这其中的规律,所以借下来我我们要实现的功能如图

 

这是第5页的现实效果,现在我们可一看到当总页数大于每屏最大显示条数时,前面的第一页就消失了

 那么当总最后不足以显示6页的时候呢,好,那么我们就从最后一页开始回显6条,如图

 

    承接上一篇博客

2.那么下面我们就按照上面的分析,来完成实现的算法 首先我们先分析一下分页用到的变量我们首先要定当前页,还有总记录数和以及每页显示条数和每屏的开始索引和结束索引,以及总的页数,和要查询当前页的信息,以及每屏显示的最大页数值 定义好了这些下面我们就写我们的算法

//这是关于分页的逻辑计算,算法多多营养多多

if(endindex>lastPage){

endindex=lastPage;//其中endiex是索引结束,lastPage//是总的页数 }if(nowPage<=4&&nowPage+2<=lastPage){ endindex=nowPage+2;//nowPage代表当前页 }if(nowPage>4&&nowPage+2<=lastPage){ startindex=nowPage-3; endindex=nowPage+2; }if(nowPage>4&&nowPage+2>lastPage&&nowPage>=6){ endindex=lastPage; startindex=lastPage-5; }

if(lastPage<=6){//这里的6当然就是每屏显示的最多页数了,当然可以根据自己的喜好改变也数那就要改变算法了

if(nowPage>=3)

endindex=nowPage+2>lastPage?lastPage:nowPage+2;

}

 


3.承接上文写一篇薄竟然要我分散份写,有么有搞错,莫非我真的out了嘛 下面我们要说的就是如何实现当点击某页的时候连接就变成红色并且不能再点,其实这个很简单的啦,只要用标签去控制连接就可以了,那么下面我们就具体操作一下 我想大家对这个都不算陌生吧,就是判断点击的页数是不是当前页如果是,就不显连接并变成红色,反之···

<c:forEach begin="${startindex}" end="${endindex}" var="ph">

<c:choose>

<c:when test="${nowPage==ph}"> <a><font color="red"><span>${ph}</span></font></a> </c:when>

<c:otherwise>

<a href="${pageContext.request.contextPath}/studentServlet2?nowPage=${ph}">[<span>${ph}</span>]</a>

</c:otherwise>

</c:choose>

</c:forEach>

好,以上就是仿谷歌分页的“兔”种算法(一)希望能给大家带来点点帮助 在这夜深人静的时刻,我们敲着代码,让灵感飞一会,其实我们敲得不是寂寞,是网络 在仿谷歌分页的“兔”种算法(二),我们将把page封装,并且实现输入想要查看的页 数,然后页面跳转功能 菜菜~~~暴走中~~~未完待续······

  • 大小: 3.8 KB
  • 大小: 4 KB
  • 大小: 4.5 KB
  • 大小: 3.7 KB
  • 大小: 4.7 KB
  • 大小: 3.2 KB
0
3
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics