基于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 相关文章推荐
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
基于canvas实现手写签名(vue)
May 21 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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python取代netcat过程分析
2018/02/10 Python
实践Vim配置python开发环境
2018/07/02 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python对切片命名的实现方法
2018/10/16 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
计算机专业求职信
2014/06/02 职场文书
金融管理专业求职信
2014/07/10 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
学术会议领导致辞
2015/07/29 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python Pandas 删除列操作
2022/03/16 Python