基于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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
前端vue如何使用高德地图
Nov 05 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
typecho插件编写教程(一):Hello World
2015/05/28 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
PHP实现简单登录界面
2019/10/23 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
js实现表格筛选功能
2017/01/18 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python assert的用处示例详解
2019/04/01 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
印度网上药店:1mg
2017/10/13 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
诚信考试承诺书
2014/03/27 职场文书
承诺书格式范文
2014/06/03 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
观后感格式
2015/06/19 职场文书
大学生暑假实习总结
2015/07/13 职场文书
教师师德承诺书2016
2016/03/25 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python