分页栏的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中Get和Set访问器的实现代码
Sep 19 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解http访问解析流程原理
Oct 18 Javascript
详解angular应用容器化部署
Aug 14 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
微信小程序canvas分享海报功能
Oct 31 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
php实现单链表的实例代码
2013/03/22 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
面试常见的js算法题
2017/03/23 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python中下划线的使用方法
2015/03/27 Python
Python中分数的相关使用教程
2015/03/30 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
详解python数据结构和算法
2019/04/18 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
招商银行工作证明
2015/06/17 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Hive HQL支持2种查询语句风格
2022/06/25 数据库