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

原创 2006年06月04日 10:30:00
在实际编程中,经常需要把大量数据分页显示,并且要提供一个分页导航栏供用户选择。现总结出一个用于常规分页的公式,这个公式比较简洁而且具有普适性。
页数=(记录总数+每页记录数-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,所以左边界调整为18+9=1717<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>");
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

C# .Net MVC Razor 视图静态分页导航栏生成器

这里贴出3个重要组成部分 1.分页导航栏主算法代码(包括 @Html 扩展方法) 2.HTML 页面调用代码(包括导航栏样式) 3.Controller 控制器代码 4.测试路径:http:/...

hibernate 数据分页显示 及 分页导航栏的设置

一个小案例 hibernate+struts2 对一个教室信息进行分页显示 只是对一个教室信息(教室名字,教室地址)在页面上进行简单分页,没有多加美工的前端处理,初学者学习javaee如果有不足的地...

分页组件- 二级导航栏

  • 2017-04-27 09:35
  • 52KB
  • 下载

Android之ViewPager+GridView实现仿美团首页导航栏布局分页效果

用过美团app的小伙伴都应该非常熟悉,美团首页的分类导航栏是作为一个头布局展示在首页上的,并且分类过多的话则可以滑动查看。本篇博客正如题目所说,采用ViewPager+GridView的方式来实现美团...

问题:分页导航--子视图控制器自定义实现

想自定义子视图控制器来实现分页导航,出了一点点问题咯,先附上代码 (1)

PHP分页导航函数

这个函数是去年写的,之前在独立博客上发布的。 function show($config=array()){ // 初始化 if(!isset($config['total']))...

Emlog分页导航条的美化

Emlog默认的分页导航说实话真的不是很美,但又不能从模版中定义,所以必须动用程序中的include\lib\function.base.php这个文件了!新浪SAE版本的需要修改include\li...

wodpress 代码显示分页导航

核心代码来源:http://www.ei2u.com/website/wordpress/wordpress-pages-navigation.html 导航栏的效果如下: 导航函数:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)