分页栏的web标准实现


Posted in Javascript onNovember 01, 2011

分页栏是网页上最常见不过的一个组件,本博文给出分页栏的一个web2.0标准示例,并作简要分析。本分页栏的界面效果如下图所示:

分页栏的web标准实现

本分页栏组件具有以下特性:

1、不论当前页码是哪一个,分页栏始终显示第一页的页码和最后一页的页码(如上图所示)。这样,用户不仅可以从最后的页码知道总共有多少页,还能方便地在最后一页和第一页之间导航。

2、使展现的页码个数(省略符也算一个)始终固定,比如固定为9个。如下面两个图所示,当前页码为19(或任意其他数字)时,展现的页码个数都为9个。这样,下一页按钮的位置始终保持不变,在做Ajax分页时,用户可以在同一个位置多次点击下一页按钮,而不会因为按钮位置发生变化而得移动鼠标,极大地提高了用户体验。

分页栏的web标准实现分页栏的web标准实现

3、通过接口参数可以方便地设置展现的页码个数。genPaginationHtml()接口的deviation(偏移量)参数用于设置当前页码的左边或右边显示的页码个数。所以,总共展现的页码个数等于2*deviation+1。比如,本示例中设置deviation4,则总共展现9个页码。

请您动手注释掉本示例以下源码,然后从界面上比较注释前后两者的区别。您还可以比较一下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; 
};

最后给出genPaginationHtml(rowsCount, pageSize, curPage, toPage, deviation)接口参数说明如下:
rowsCount(number):记录总数。
pageSize(number):每页显示的记录数。
curPage(number):当前页页码。
toPage(string):一个函数名,实现跳到指定页的逻辑。
deviation(number):当前页码的左边或右边显示的页码个数。

分页栏示例下载

Javascript 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
jquery键盘事件使用介绍
Nov 01 #Javascript
JS鼠标事件大全 推荐收藏
Nov 01 #Javascript
EasyUI中的tree用法介绍
Nov 01 #Javascript
jQuery代码优化 事件委托篇
Nov 01 #Javascript
jQuery代码优化 遍历篇
Nov 01 #Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Django获取应用下的所有models的例子
2019/08/30 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
别名指示符是什么
2012/10/08 面试题
商务英语专业求职信范文
2014/01/28 职场文书
烹调加工管理制度
2014/02/04 职场文书
家长会主持词
2014/03/26 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
师德师风个人反思
2014/04/28 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
承诺函范文
2015/01/21 职场文书
新年寄语2016
2015/08/17 职场文书