脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery的Pager分页器

基于JQuery的Pager分页器实现代码

 更新时间：2010年07月17日 12:56:20   作者：  
页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，javascript分页简单搞定。
实例效果图如下



使用说明
需要使用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.jb51.net/js/jquery-pager/index.html
您可能感兴趣的文章:

相关文章

  • jQuery实现弹弹球小游戏

    jQuery实现弹弹球小游戏

    这篇文章主要为大家详细介绍了jQuery实现弹弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 浅析jquery的js图表组件highcharts

    浅析jquery的js图表组件highcharts

    本篇文章主要是对jquery的js图表组件highcharts进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • 使用jQuery插件创建常规模态窗口登陆效果

    使用jQuery插件创建常规模态窗口登陆效果

    隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素，下面与大家分享下如何利用jQuery插件leanModal建立一个常规模态窗口
    2013-08-08
  • jquery 学习之二 属性(html()与html(val))

    jquery 学习之二 属性(html()与html(val))

    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
    2010-11-11
  • 基于jQuery的烟花效果（运动相关）点击屏幕出烟花

    基于jQuery的烟花效果（运动相关）点击屏幕出烟花

    基于jQuery的烟花效果（运动相关）点击屏幕出烟花 ，经测试不能点击过多，容易假死
    2012-06-06
  • jQuery实现select模糊查询（反射机制）

    jQuery实现select模糊查询（反射机制）

    这篇文章主要为大家详细介绍了jQuery实现select带模糊查询的条件查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • IE6下opacity与JQuery的奇妙结合

    IE6下opacity与JQuery的奇妙结合

    在群里看见有人贴出一个页面问opacity不支持IE6，有什么好的支持方法没。贴出第一眼就发现用了jq库，当场就想到了支持的。 但很多人回答用CSS滤镜，当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持opacity兼容IE6+的吗？ 开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。
    2013-03-03
  • jQuery 树形结构的选择器

    jQuery 树形结构的选择器

    树形结构里的节点，如果它不是根部，也不是末枝，那么它一定有父母和孩子。
    2010-02-02
  • jQuery maxlength文本字数限制插件

    jQuery maxlength文本字数限制插件

    相信大家对twitter类的微博客都不陌生,作为一句话博客其字数即时提示效果设计的非常人性化.
    2010-04-04
  • jQuery实现响应浏览器缩放大小并改变背景颜色

    jQuery实现响应浏览器缩放大小并改变背景颜色

    这篇文章主要介绍了jQuery实现响应浏览器缩放大小并改变背景颜色,比较实用，也很简单，使用到了一个resize事件需要的朋友可以参考下
    2014-10-10

最新评论