使用JQuery实现的分页插件分享

一个简单的jQuery分页插件，兼容AMD规范和requireJS.

/** * jQuery分页插件 * */;（function （factory） {if （typeof define === "function" && define.amd） {// AMD模式define（[ "jquery" ], factory）;} else {// 全局模式factory（jQuery）;}}（function （$） {//定义MyPagePlugin的构造函数MyPagePlugin = function（ele, option） { //this.viewHtml="<nav><ul class="pagination"><li><a id="firstPageli">«</a></li><li><a id="prevPageli">‹</a></li><li class="active"><a>第<span id="curPageNoSpan"></span>页,共<span id="allPageCountSpan"></span>页</a></li><li><a id="nextPageli">›</a></li><li><a id="lastPageli">»</a></li></ul></nav>";this.viewHtml= "<div class="pageplugin"><a class="first firstPageli">«</a><a class="previous prevPageli">‹</a><a class="present">第<span class="curPageNoSpan"></span>页,共<span class="allPageCountSpan"></span>页</a><a class="next nextPageli">›</a><a class="last lastPageli">»</a></div>" this.$element = ele;/**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/this.defaults = {page:1,pageCount:1,onPaged:function（pageNo）{}};this.options = $.extend（{}, this.defaults, option）; }//定义MyPagePlugin的方法MyPagePlugin.prototype = {initPlugin:function（）{this.$element.empty（）; this.$element.append（this.viewHtml）; this.options.onPaged（this.options.page）;//初始化 this.$element.find（".curPageNoSpan"）.text（this.options.page）; this.$element.find（".curPageNoSpan"）.data（"options",this.options）; this.$element.find（".allPageCountSpan"）.text（this.options.pageCount）; this.$element.find（".firstPageli"）.on（"click",function（e）{ var curNo=$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（）;curNo=parseInt（curNo）;if（curNo==1）{ return false;}else{ $（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.data（"options"）.onPaged（1）;$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（1）;}return false; }）; this.$element.find（".prevPageli"）.on（"click",function（e）{var curNo=$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（）;curNo=parseInt（curNo）;if（curNo==1）{return false;}else{$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.data（"options"）.onPaged（curNo-1）;$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（curNo-1）;}return false; }）; this.$element.find（".nextPageli"）.on（"click",function（e）{var curNo=$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（）;curNo=parseInt（curNo）;var pageCount=$（e.currentTarget）.parent（"div.pageplugin"）.find（".allPageCountSpan"）.text（）;pageCount=parseInt（pageCount）;if（curNo==pageCount）{return false;}else{$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.data（"options"）.onPaged（curNo+1）;$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（curNo+1）;}return false; }）; this.$element.find（".lastPageli"）.on（"click",function（e）{var curNo=$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（）;curNo=parseInt（curNo）;var pageCount=$（e.currentTarget）.parent（"div.pageplugin"）.find（".allPageCountSpan"）.text（）;pageCount=parseInt（pageCount）;if（curNo==pageCount）{ return false;}else{$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.data（"options"）.onPaged（pageCount）;$（e.currentTarget）.parent（"div.pageplugin"）.find（".curPageNoSpan"）.text（pageCount）;}return false; }）; }}$.fn.pagePlugin = function （option） {var pagePlugin=new MyPagePlugin（this,option）;pagePlugin.initPlugin（）;};}））;

CSS

.pageplugin { display: inline-block; border: 1px solid #CDCDCD; border-radius: 3px; } .pageplugin a { cursor: pointer; display: block; float: left; width: 20px; height: 20px; outline: none; border-right: 1px solid #CDCDCD; border-left: 1px solid #CDCDCD; color: #767676; vertical-align: middle; text-align: center; text-decoration: none; font-weight: bold; font-size: 16px; font-family: Times, "Times New Roman", Georgia, Palatino;background-color: #f7f7f7; /* ATTN: need a better font stackbackground-color: #f7f7f7; background-image: -webkit-gradient（linear, left top, left bottom, color-stop（0%, #f3f3f3）, color-stop（100%, lightgrey））; background-image: -webkit-linear-gradient（#f3f3f3, lightgrey）; background-image: linear-gradient（#f3f3f3, lightgrey）; */} .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active {color:#0099CC;background-color: #cecece;background-image: -webkit-gradient（linear, left top, left bottom, color-stop（0%, #e4e4e4）, color-stop（100%, #cecece））;background-image: -webkit-linear-gradient（#e4e4e4, #cecece）;background-image: linear-gradient（#e4e4e4, #cecece）; } .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active {background-color: #f3f3f3;background-image: -webkit-gradient（linear, left top, left bottom, color-stop（0%, #f3f3f3）, color-stop（100%, lightgrey））;background-image: -webkit-linear-gradient（#f3f3f3, lightgrey）;background-image: linear-gradient（#f3f3f3, lightgrey）;color: #A8A8A8;cursor: default; } .pageplugin a:first-child { border: none; border-radius: 2px 0 0 2px; } .pageplugin a:last-child { border: none; border-radius: 0 2px 2px 0; }.pageplugin .present { float: left; margin: 0; padding: 0; width: 120px; height: 20px; outline: none; border: none; vertical-align: middle; text-align: center; }

jquery分页插件cypager
cypager是网友分享到JquerySchool网站上的一款作品，非常实用，经过测试，插件兼容 IE8+,Chrome,Firefox 浏览器,核心文件仅 5KB。。。
调用方式

由于是 jquery插件，所以在引人 cypager.min.js 之前，要引人 jquery.min.js 本人使用的是 1.7.2 版本的，低版本的没试过。
引入css : <link rel="stylesheet" href="css/cypager.min.css" />
引人js : <script type="text/javascript" src="js/cypager.min.js"/>

$（function（）{$（"#pagerArea"）.cypager（{pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function（count）{alert（"跳转至页面:"+count+""）;}}）;}）;

参数说明
pgerId //插件的ID 默认 : cy_pager
pg_size //每页显示记录数默认：10条
pg_cur_count //当前页数（如果需要默认显示指定页面，则设置）
pg_total_count //总记录数
pg_nav_count     //显示多少个导航数默认：7个
pg_prev_name     //上一页按钮名称（默认：PREV）
pg_next_name     //下一页按钮名称（默认：NEXT）
pg_call_fun（page_count）      //回调函数，点击按钮执行
高效JQUERY分页插件源代码JQUERY.PAGER.JS
本文将给大家分享一个非常不错的分页插件、jQuery.pager.js、该插件的优点是可以内容索引、使用了jQuery、也同时调用了jquery.pager.js文件、分页都是基于Ajax的、当然、如果你不打算使用Ajax来实现分页的话、那么你最好不要使用本插件、若使用的话反而很麻烦、本插件主要是为使用Ajax技术交互的网站所准备、可以很方便的嵌入到网站系统中、实现Ajax分页功能、如果大家觉得这个效果不是很好看的话、可以自己重写分页按钮的样式哈
HTML代码很简单、只要准备一个用于分页代码的DIV就可以了

<div class="tcdPageCode"></div>

通过jQuery的方式调用即可

$（".tcdPageCode"）.createPage（{ pageCount:6, current:1, backFn:function（p）{ console.log（p）; }}）;