基于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 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
微信小程序实现日历签到
Sep 21 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python3.4爬虫demo
2019/01/22 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python requests库的使用
2021/01/06 Python
Python对excel的基本操作方法
2021/02/18 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
导游词之宿迁乾隆行宫
2019/10/15 职场文书
利用python做表格数据处理
2021/04/13 Python
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js