使用JQuery实现的分页插件分享
一个简单的jQuery分页插件，兼容AMD规范和requireJS.
/**
*jQuery分页插件
**/
;(function(factory){
if(typeofdefine==="function"&&define.amd){
//AMD模式
define(["jquery"],factory);
}else{
//全局模式
factory(jQuery);
}
}(function($){
//定义MyPagePlugin的构造函数
MyPagePlugin=function(ele,option){
//this.viewHtml="<nav><ulclass='pagination'><li><aid='firstPageli'>«</a></li><li><aid='prevPageli'>‹</a></li><liclass='active'><a>第<spanid='curPageNoSpan'></span>页,共<spanid='allPageCountSpan'></span>页</a></li><li><aid='nextPageli'>›</a></li><li><aid='lastPageli'>»</a></li></ul></nav>";
this.viewHtml="<divclass='pageplugin'><aclass='firstfirstPageli'>«</a><aclass='previousprevPageli'>‹</a><aclass='present'>第<spanclass='curPageNoSpan'></span>页,共<spanclass='allPageCountSpan'></span>页</a><aclass='nextnextPageli'>›</a><aclass='lastlastPageli'>»</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){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
}
returnfalse;
});
this.$element.find(".prevPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
if(curNo==1){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
}
returnfalse;
});
this.$element.find(".nextPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
varpageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);
}
returnfalse;
});
this.$element.find(".lastPageli").on("click",function(e){
varcurNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
curNo=parseInt(curNo);
varpageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
pageCount=parseInt(pageCount);
if(curNo==pageCount){
returnfalse;
}else{
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);
}
returnfalse;
});
}
}
$.fn.pagePlugin=function(option){
varpagePlugin=newMyPagePlugin(this,option);
pagePlugin.initPlugin();
};
}));
CSS
.pageplugin{
display:inline-block;
border:1pxsolid#CDCDCD;
border-radius:3px;}
.pageplugina{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
outline:none;
border-right:1pxsolid#CDCDCD;
border-left:1pxsolid#CDCDCD;
color:#767676;
vertical-align:middle;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:16px;
font-family:Times,'TimesNewRoman',Georgia,Palatino;
background-color:#f7f7f7;
/*ATTN:needabetterfontstack
background-color:#f7f7f7;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#f3f3f3),color-stop(100%,lightgrey));
background-image:-webkit-linear-gradient(#f3f3f3,lightgrey);
background-image:linear-gradient(#f3f3f3,lightgrey);*/}
.pageplugina:hover,.pageplugina:focus,.pageplugina:active{
color:#0099CC;
background-color:#cecece;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#e4e4e4),color-stop(100%,#cecece));
background-image:-webkit-linear-gradient(#e4e4e4,#cecece);
background-image:linear-gradient(#e4e4e4,#cecece);}
.pageplugina.disabled,.pageplugina.disabled:hover,.pageplugina.disabled:focus,.pageplugina.disabled:active{
background-color:#f3f3f3;
background-image:-webkit-gradient(linear,lefttop,leftbottom,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;}
.pageplugina:first-child{
border:none;
border-radius:2px002px;}
.pageplugina:last-child{
border:none;
border-radius:02px2px0;}
.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:<linkrel="stylesheet"href="css/cypager.min.css"/>
引人js :<scripttype="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就可以了
<divclass="tcdPageCode"></div>
通过jQuery的方式调用即可
$(".tcdPageCode").createPage({
pageCount:6,
current:1,
backFn:function(p){
console.log(p);
}
});