分页公式以及分页导航栏总结

在实际编程中，经常需要把大量数据分页显示，并且要提供一个分页导航栏供用户选择。现总结出一个用于常规分页的公式，这个公式比较简洁而且具有普适性。

页数 =( 记录总数 + 每页记录数 -1)/ 每页记录数

注意，这里的除法是整除。举例验证，假设总记录数为 10 条，要求每页显示 5 条，则页数 =(10+5-1)/5=2 。若总记录数改为 11 条，仍然要求每页显示 5 条，则页数 =(11+5-1)/5=3 。这与实际情况是如符合的。

除此之外，还需要给用户提供一个分页导航栏，便于用户翻页。笔者观察过很多网站的分页导航栏，认为 Google 的分页导航栏是最好的。它提供了页码和上下翻动两种方式，而且导航栏上显示的页码总是与当前页的页码相邻的若干个数。

(a)      当前页为第 1 页

(b)     当前页为第 8 页

(c)      当前页为最后一页

图 4.5  Google 的分页导航栏

经过观察不难发现， Google 的分页导航栏的页码显示有这样一个规律。就是当前页码的左侧最多显示 10 个比它小的页码，右侧最多显示 9 个比它大的页码。那么基本的思路就是这样的，已知当前页码为 N ，则导航栏页码左边界暂设为 N-10 ，如果 N-10<1 ，再调整左边界为 1 。导航栏页码右边界暂设为 N+9 ，如果 N+9> 总页数，再调整右边界为总页数。我们可以验证一下，图 4.3(b) 中，当前页为 8, 8-10= -2 ， -2 小于 1 ，所以左边界调整为 1 。 8+9=17 ， 17<24 （总页数），所以右边界仍为 17 。具体的 JavaScript 实现代码如下所示：

function showpager(cur,max){

    var beindex=cur-10;  // 假定左边界

    var endindex=cur+9;  // 假定右边界

    if(beindex<1)beindex=1;  // 微调

    if(endindex>max)endindex=max;

    if(cur>1)document.write("<a href='Board.aspx?pageno="+(cur-1)+"'> 上一页 </a>&nbsp;");

    for(i=beindex;i<=endindex;i++){

        if(i==cur){

            document.write("<strong>"+i+"<strong>&nbsp;&nbsp;");

        }

        else{

            document.write("<a href='Board.aspx?pageno="+i+"'>"+i+"</a>&nbsp;&nbsp;");

        }

    }

    if(cur<max){

        document.write("<a href='Board.aspx?pageno="+(cur+1)+"'> 下一页 </a>");

    }

}