基于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弹出DIV窗口层的效果
Sep 25 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
js实现随机点名程序
Sep 17 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
基于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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
pyside写ui界面入门示例
2014/01/22 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python实现配置文件备份的方法
2015/07/30 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python conda操作方法
2019/09/11 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
应届生如何写自荐信
2014/01/05 职场文书
管理标语大全
2014/06/24 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2015年幼师工作总结
2015/04/28 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS