分页控件的web标准实现(始终显示第一页和最后一页的页码)
2011-11-01 20:14 AndrewCja 阅读(1930) 评论(0) 编辑 收藏 举报
分页栏是网页上最常见不过的一个组件,本博文给出分页栏的web2.0标准示例,并作简要分析。本分页栏的界面效果如下图所示:
本分页栏组件具有以下特性:
1、不论当前是哪一页,分页栏始终显示第一页的页码和最后一页的页码(如上图所示)。这样,界面上不需要额外的文字说明总共有多少页,用户可以从最后的页码知道总共有多少页;界面上也不需要最前页和最后页两个按钮,因为始终显示第一页的页码和最后一页的页码,用户能方便地导航。
2、使展现的页码个数(省略符也算一个)始终固定。如下面两图所示,当前页码为1或9(或任意其他数字)时,展现的页码个数都为11个。这样,下一页按钮的位置始终保持不变,在做Ajax分页时,用户可以在同一个位置多次点击下一页按钮,而不会因为按钮位置发生变化而得移动鼠标,从细节上提高了用户体验。
3、通过接口参数可以方便地设置展现的页码个数。genPaginationHtml()接口的deviation(偏移量)参数用于设置当前页码的左边或右边显示的页码个数。所以,总共展现的页码个数等于2*deviation+1。比如,本示例中设置deviation为5,则总共展现11个页码。
请您动手注释掉本示例以下源码,然后从界面上比较注释前后两者的区别。您还可以比较一下Google的分页行为,您会发现其行为就是注释掉本示例以下代码后的行为。在编写本示例的时候我研究了Google的分页行为,然后再逐步演变扩展。
if (curPage - startNum < deviation) {
endNum += deviation - (curPage - startNum);
endNum = endNum > pagesCount ? pagesCount : endNum;
}
if (endNum - curPage < deviation) {
startNum -= deviation - (endNum - curPage);
startNum = startNum < 1 ? 1 : startNum;
};
if(i == startNum && startNum > 1) {
strPager += "<a class='num' href='javascript:"+toPage+"(1);"+"'>1</a>";
continue;
}
if(i == startNum + 1 && startNum > 1){
strPager += htmlDot;
continue;
}
if(i == endNum - 1 && endNum < pagesCount) {
strPager += htmlDot;
continue;
}
if(i == endNum && endNum < pagesCount){
strPager += "<a class='num' href='javascript:"+toPage+"("+pagesCount+");'>"+pagesCount+"</a>";
continue;
}
注释后结果如下图所示:
最后给出genPaginationHtml(rowsCount, pageSize, curPage, toPage, deviation)接口参数说明如下:
rowsCount(number):记录总数。
pageSize(number):每页显示的记录数。
curPage(number):当前页页码。
toPage(string):一个函数名,实现跳到指定页的逻辑。
deviation(number):当前页码的左边或右边显示的页码个数。