基于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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
js实现时间日期校验
May 26 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
详解JavaScript中的链式调用
Nov 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
中国的第一台收音机
2021/03/01 无线电
PHP 字符串操作入门教程
2006/12/06 PHP
php Undefined index的问题
2009/06/01 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
VSCode launch.json配置详细教程
2020/06/18 Javascript
详解Python中类的定义与使用
2017/04/11 Python
Python 登录网站详解及实例
2017/04/11 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
详解Python3中的 input() 函数
2020/03/18 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
幼儿园保育员辞职信
2014/01/12 职场文书
班级入场式解说词
2014/02/01 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server