基于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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
浅谈javascript回调函数
Dec 07 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Python入门教程之if语句的用法
2015/05/14 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python操作redis方法总结
2018/06/06 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
车辆转让协议书
2014/04/15 职场文书
工程部岗位职责
2015/02/10 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
MySQL约束超详解
2021/09/04 MySQL
详解JAVA的控制语句
2021/11/11 Java/Android