分页栏的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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
js动态设置div的值下例子
Oct 29 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
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
第八节--访问方式
2006/11/16 PHP
实用函数5
2007/11/08 PHP
php数组总结篇(一)
2008/09/30 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python列表去重的二种方法
2014/02/14 Python
从零学Python之hello world
2014/05/21 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python @property使用方法解析
2019/09/17 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python的logging模块基本用法
2020/12/24 Python
后勤园长自我鉴定
2013/10/17 职场文书
小学亲子活动总结
2014/07/01 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
机关作风建设整改方案
2014/10/27 职场文书
成绩单评语
2015/01/04 职场文书