分页栏的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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
javascript复制对象使用说明
Jun 28 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 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
swfupload 多文件上传实现代码
2008/08/27 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP实现图片压缩
2020/09/09 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
研究生毕业鉴定
2014/01/29 职场文书
《锄禾》教学反思
2014/04/08 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
大学生操行评语大全
2014/12/31 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
狂人日记读书笔记
2015/06/30 职场文书
工作简报怎么写
2015/07/21 职场文书
任命书格式模板
2015/09/22 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python