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

原创 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>");
    }
}

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单,很基础的东西。 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 本文结构: 1...
  • at_wangwei
  • at_wangwei
  • 2016年05月06日 13:09
  • 2878

PHP 首页导航栏源代码

首页导航源栏代码为单独一个页面,其他页面引用使用,这样整网站的导航都可以统一管理。把下面的代码另存为menu.php 这里使用一个语句即可成功引用导航: ("menu.php"); ?> ...
  • Michael__mai
  • Michael__mai
  • 2016年02月13日 16:05
  • 3057

点击导航栏切换页面的几种方式

1.RedioGroup+Fragment(推荐) 2.底部线性布局+帧布局(放fragment) 3.RedioGroup+Viewpager
  • zsr0526
  • zsr0526
  • 2017年03月22日 19:20
  • 3632

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

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

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

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

分页组件- 二级导航栏

  • 2017年04月27日 09:35
  • 52KB
  • 下载

ViewPager+GridView实现首页导航栏布局分页效果

  • 2016年10月27日 16:56
  • 1.5MB
  • 下载

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

  • 2016年10月27日 10:20
  • 124KB
  • 下载

118.分页中显示出下面翻页的导航栏的布局

当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml ...
  • augfun
  • augfun
  • 2017年04月16日 00:52
  • 617

一般app底部导航栏的分页效果

大致效果是这样。上面页面和底部页面按钮一一对应。 页面滑动底部按钮变化,点击按钮页面变化 大致思路 页面用Viewpager添加类型为FragmentpagerAdapter的Adapter。 使...
  • a450479378
  • a450479378
  • 2016年06月29日 13:40
  • 783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分页公式以及分页导航栏总结
举报原因:
原因补充:

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