脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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优缺点分析说明

    如果你还在犹豫是否要学习一个JavaScript框架，并困惑于选择哪一个框架，那么我推荐你选择jQuery。这并非说其它框架不好，只是jQuery可能是最稳妥和最具回报性的选择。
    2010-06-06
  • jQuery+jsp实现省市县三级联动效果(附源码)

    jQuery+jsp实现省市县三级联动效果(附源码)

    这篇文章主要介绍了jQuery+jsp实现省市县三级联动效果,以完整实例形式分析了jQuery结合jsp读取MySQL数据库操作实现省市县三级联动效果的相关技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • 各浏览器中querySelector和querySelectorAll的实现差异分析

    各浏览器中querySelector和querySelectorAll的实现差异分析

    querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)
    2012-05-05
  • jQuery与getJson结合的用法实例

    jQuery与getJson结合的用法实例

    这篇文章主要介绍了jQuery与getJson结合的用法,实例分析了jquery解析json数据及数组遍历的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery层级选择器用法分析

    jQuery层级选择器用法分析

    这篇文章主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
    2015-02-02
  • 浅谈jQuery绑定事件会叠加的解决方法和心得总结

    浅谈jQuery绑定事件会叠加的解决方法和心得总结

    下面小编就为大家带来一篇浅谈jQuery绑定事件会叠加的解决方法和心得总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    文字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
    2010-07-07
  • jquery easyui combox一些实用的小方法

    jquery easyui combox一些实用的小方法

    这篇文章主要介绍了jquery easyui combox一些实用的小方法，有需要的朋友可以参考一下
    2013-12-12
  • jQuery之动画效果大全

    jQuery之动画效果大全

    本篇文章主要介绍了jQuery之动画效果，详细的介绍了各种动画特效的用法，有需要的可以了解一下。
    2016-11-11
  • jQuery1.5.1 animate方法源码阅读

    jQuery1.5.1 animate方法源码阅读

    jquery本身的动画较之mootools，总体上感觉稍微有点逊色，不过因为其有强大的插件，加上API易读型，易用性等备受青睐，在动画效果方面，API提供了比如一些比较实用的Effects，下面是main方法animate
    2011-04-04

最新评论