基于JQuery的Pager分页器实现代码


Posted in Javascript onJuly 17, 2010

实例效果图如下
基于JQuery的Pager分页器实现代码

基于JQuery的Pager分页器实现代码
使用说明
需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1)

素材准备
分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css

#pager ul.pages { 
display:block; 
border:none; 
text-transform:uppercase; 
font-size:10px; 
margin:10px 0 50px; 
padding:0; 
} 
#pager ul.pages li { 
list-style:none; 
float:left; 
border:1px solid #ccc; 
text-decoration:none; 
margin:0 5px 0 0; 
padding:5px; 
} 
#pager ul.pages li:hover { 
border:1px solid #003f7e; 
} 
#pager ul.pages li.pgEmpty { 
border:1px solid #eee; 
color:#eee; 
} 
#pager ul.pages li.pgCurrent { 
border:1px solid #003f7e; 
color:#000; 
font-weight:700; 
background-color:#eee; 
}

实例代码
一,包含文件部分
<link href="Pager.css" rel="stylesheet" type="text/css" /> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.pager.js" type="text/javascript"></script>

一个CSS样式文件,二个JS库文件。

二,HTML部分(分页器显示div)

<h1 id="result">必优博客 jQuery分页器 </h1> 
<div id="pager" ></div>

三,javascript部分(jQuery插件JQuery Pager分页器调用)
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
$("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick }); 
}); 
PageClick = function(pageclickednumber) { 
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick 
}); 
$("#result").html("必优博客 jQuery分页器 当前第" + pageclickednumber + "页"); 
} 
</script>

四,javascript代码(JQuery Pager调用)分析
(1)$("#pager").pager({});部分
pagenumber,表示初始页数,如:1
pagecount,表示总页数,如:15
buttonClickCallback,表示点击分页数按钮调用的方法,如:PageClick

(2)PageClick = function(pageclickednumber) {}部分
PageClick,表示自定义点击分页数时的function方法,如:function(pageclickednumber){}

jQuery插件JQuery Pager分页器只需要起始页数pagenumber,最大页数pagecount,点击页数时的调用buttonClickCallback的function方法就可实现javascript分页功能,实际应用中只需对PageClick方法进行简单修改就可使用,如将pagenumber和pagecount设为变量,可通过GET的方法进行页数值传递,JQuery Pager就可实现javascript分页功能,其它可自行扩展,同时对jQuery插件JQuery Pager分页器buttonClickCallback方法实现丰富的动态效果,供参考。
演示代码:http://demo.3water.com/js/jquery-pager/index.html

Javascript 相关文章推荐
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jquery实现图片预加载
Dec 25 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 #Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 #Javascript
JavaScript.Encode手动解码技巧
Jul 14 #Javascript
JavaScript中的一些定位属性[图解]
Jul 14 #Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 #Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 #Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 #Javascript
You might like
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
有关Python的22个编程技巧
2018/08/29 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python爬虫实现获取下一页代码
2020/03/13 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
安全生产检讨书
2014/01/21 职场文书
公益广告标语
2014/06/19 职场文书
工作失职检讨书500字
2014/10/17 职场文书