分页控件的web标准实现（始终显示第一页和最后一页的页码）

分页栏组件下载

 

分页栏是网页上最常见不过的一个组件，本博文给出分页栏的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)：当前页码的左边或右边显示的页码个数。